一、过渡
什么是过渡？
过渡是指：某元素的css属性值在一段时间内，平滑过渡到另外一个值，过渡主要观察的是过程和结果。
设置能够过渡的属性：
支持过渡的样式属性，颜色的属性，取值为数值，transform，渐变，visibility， 阴影
指定本次过渡生效的属性：
transition-poperty:上面的css属性/all
指定过渡的时长
transition-duration:过渡时长/s/ms
指定过渡时间曲线函数
transition-timing-function:
1.ease 默认值，慢-->快-->慢 慢速开始，快速变快，慢速结束
2.linear 匀速
3.ease-in 慢--->快 慢速开始,快速结束
4.ease-out 快速开始，慢速结束
5.ease-in-out 慢速开始，先加速再减速，慢速结束
指定延迟执行过渡的时间
transition-delay: s/ms
过渡属性的编写位置
1.将过渡放在元素声明的样式中（元素自己的样式里）过渡效果有去有回。
2.将过渡放在元素的触发操作中(hover),过渡效果有去无回。
过渡的简写：
transition:property duration timing-function delay;
最少的方式：transition:duration;
二、动画
什么是动画？
使元素从一种样式，改变到另外一种，再改变到其他样式......
相当于将很多个过渡效果放到一起使用。
关键帧：
1.动画的执行时间点
2.该时间点上的样式
动画的实现步骤：
1.声明动画及动画关键帧
@keyframes 动画名称{
//定义关键帧
0%{ 动画开始的样式 }
........
100%{动画结束时的样式}
}
2.调用动画
animation-name:动画名称；
animation-duration:动画播放一个周期的时间；
3.动画的其他属性
animation-delay
4.动画的速度时间曲线函数
animation-timing-function
ease/linear/ease-in/ease-out/ease-in-out
5.animation-iteration-count
指定动画的播放次数
取值，具体的数字/infinite无限次
6.animation-direction:
动画的播放方向
取值 normal 正常 0%-100%
reverse 逆向播放 100%-0%
alternate 轮流播放
奇数次正向播放
偶数次逆向播放
7.简写方式：
animation:name duration timing-function delay iteration-count direction;
8.animation-fill-mode
指定动画播放前后的显示状态
1.none 默认值
2.forwards 动画完成后，保持在最后一个关键帧上
3.backwards(需要有delay)动画开始之前，保持在第一个关键帧上
4.both,同时设置forwards和backwards
动画的兼容性：
如果要兼容低版本的浏览器，需要在声明动画的时候加前缀
@keyframes 动画名称{}
@-webkit-keyframes
@-moz-keyframes
@-o-keyframes
三.CSS优化
目的：减少服务器压力，提升用户体验。
1.优化原则
尽量减少HTTP请求的个数。
页面顶部引入css样式
将css和js放到外部独立的文件夹中
2.CSS代码优化
缩小样式文件
减少样式的重写
避免出现空的src和href
选择更优的样式属性值(能使用复合，简写的写法,就不要单独定义)
代码压缩
原文地址：https://www.cnblogs.com/sna-ling/p/11620241.html