转换（transform）
2D转换
-
translate()：
translate.png
-
rotate()：
rotate.png
-
scale()：
scale.png
-
skew():
skew.png
skew.png
-
matrix():
matrix( a, b, c, d, e, f );
a 水平缩放
b 水平倾斜
c 垂直倾斜
d 垂直缩放
e 水平移动
f 垂直移动
matrix.png
-
transform-origin (): 允许您更改转化元素位置
image.png
3D转换
image.png
-
transform-origin(): 允许你改变被转换元素的位置。
image.png
-
transform-style(): 规定被嵌套元素如何在 3D 空间中显示。
image.png
-
perspective(): 规定 3D 元素的透视效果。
image.png
-
perspective-origin(): 规定 3D 元素的底部位置。
image.png
-
backface-visibility(): 定义元素在不面对屏幕时是否可见。
image.png
过渡
元素从一种样式逐渐改变为另一种的效果
过渡属性
过渡属性.png
- transition: property duration timing-function delay;
- transition-property: none|all| property;属性指定CSS属性的nametransition效果
- **transition-duration : time;属性规定完成过渡效果需要花费的时间（以秒或毫秒计）。
-
transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);属性指定切换效果的速度。
transition-timing-function值.png
- **ttransition-delay : time;属性指定何时将开始切换效果。
transition-delay值是指以秒为单位（S）或毫秒（ms）。
多项改变
多项改变.png
与转换效果一起使用
与转换效果一起使用例子.png
动画
@keyframes 规则
要创建 CSS3 动画，你需要了解 @keyframes 规则。
@keyframes 规则是创建动画。
@keyframes 规则内指定一个 CSS 样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
指定至少这两个CSS3的动画属性绑定向一个选择器：
- 规定动画的名称
-
规定动画的时长
规定动画的名称、时长.png
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
百分比.png
from" - "to.png
动画属性
-
@keyframes:规定动画。
keyframes.png
-
animation:所有动画属性的简写属性，除了 animation-play-state 属性。
animation.png
- animation-name:规定 @keyframes 动画的名称。
- animation-duration:定义动画完成一个周期需要多少秒或毫秒。默认是 0。
-
animation-timing-function:指定动画将如何完成一个周期。
animation-timing-function.png
-
animation-fill-mode: 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
默认情况下，CSS 动画在第一个关键帧播放完之前不会影响元素，在最后一个关键帧完成后停止影响元素。animation-fill-mode 属性可重写该行为。
animation-fill-mode.png
-
animation-delay:定义动画什么时候开始。单位可以是秒（s）或毫秒（ms）。默认是 0。
animation-delay.png
-
animation-iteration-count:定义动画应该播放多少次。
animation-iteration-count.png
-
animation-direction 属性定义是否循环交替反向播放动画。
animation-direction.png
-
animation--play-state属性指定动画是否正在运行或已暂停。
animation--play-state.png
动画常见坑
- @keyframes 不能实现突变的状态变化
@keyframes 的原理是把样式的从一个状态，慢慢转变为另一个状态。例如：
* div 在2s内下移200px
*/
div {
position:absolute;
animation: move 2s;
}
@keyframes move {
from { top:0; }
to { top:200px;}
}
上述div的移动，不是一步完成的，而是中间有很多个状态，从top:1px , 到top :2px , top: 3px ……最终到 top:200px; 这样一系列状态组成而构成的动画。
所以，如果不存在渐变的状态，是无法用@keyframes构成动画的，例如：
div {
animation: apear 2s;
}
@keyframes appear {
from { display:none; }
to { display:block;}
}
我们知道，display:none;是将div消失并且不占空间，display:block;则是将div展现存在并占据空间。但上述代码是无法使div拥有 2秒内从消失到展现 的渐变动画的，因为display:none;和display:block;是突变的，是从display:none;一下子到display:block;状态的。所以@keyframes无法实现。
同理其他种类的突变属性也无法拥有@keyframes的动画效果，@keyframes 只存在于渐变属性当中，例如各种width, height, opacity等属性值为数值的属性。
- @keyframes会增添/覆盖属性
/*
* div 在2s内下移200px
*/
div {
position:absolute;
top:0px;
animation: move 2s;
}
@keyframes move {
from { top:20px; }
to { top:200px;}
}
覆盖属性：如上述情况，div初始状态是top:0; @keyframes首先用top:20px覆盖原属性（top:0;）,然后再启动@keyframes功能。 所以我们看到的效果是：div突然瞬间下降20px，然后在2秒内下降至指定位置（top:200px;）。
/*
* div 在2s内下移200px
*/
div {
position:absolute;
top:0px;
animation: move 2s;
}
@keyframes move {
from { top:0px; }
to { bottom:0px;}
}
添加属性：上述代码初始状态是div在顶部，最后状态是div 在底部，但像上面这样写 并不会出现div 从顶部慢慢下滑至底部的动画，而是div突然就出现在了底部。这是因为初始状态为div{ top:0px ;}，但最终状态却不会是 div { bottom:0px; } , 而是 div { top:0px; bottom: 0px; } ，这样就会出现明显的错误，达不到我们预想的效果。
小结: @keyframes 中的属性，如果div本身存在该属性，就被@keyframes 中的属性给覆盖掉。 如果div本身不存在该属性，则为div增添该属性。
- 动画性能优化
当你在使用@keyframes 动画时，如果做的动画比较复杂的话，就会发现一个问题，那就是不流畅，掉帧，可能在PC端还不是很明显，但在移动端你就会发现严重地掉帧。这是因为，如果@keyframes 改变的属性是与layout相关的话，就会触发重新布局，导致渲染和绘制的时间会更加地长。 所以，我们应该尽可能地使用不会触发重新布局的属性完成我们的动画。- 触发重新布局的属性有： width, height, margin, padding, border, display, top, right, bottom ,left, position, float, overflow等。应该尽量规避使用。
- 不会出发重新布局的属性有：transform(其中的translate, rotate, scale), color, background等。应该尽量用这些去取代。
- 已知bug
- iOS 6.1及以下不支持伪元素动画。iOS 7和更高的版本的伪元素动画会些问题。
- Firefox 不支持@keyframes 在内联元素的使用。
- 在Chorme中，如果使用了steps(x , start) ，animation-fill-mode backwards将会出错。如例子
- 在IE10和IE11中，@keyframes不能在媒体查询@media内使用。
————————————————
参考链接：
网友评论