Transition
1
| transition: [property duration timing-function delay]
|
property 默认值 all，duration 和 delay 默认值 0，timing-function 默认值 ease。可使用 , 分割，实现多个动画，配合 duration，还可实现队列动画。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| .box {
display: flex;
width: 65px;
height: 40px;
align-items: center;
justify-content: center;
background: #92B901;
font-size: 12px;
opacity: 0.4;
transition: transform 1s, opacity 1s, background 1s, width 1s, height 1s, font-size 1s;
}
.box:hover {
width: 90px;
height: 60px;
transform: rotate(360deg);
font-size: 16px;
opacity: 1;
background: #1ec7e6;
}
|
transition 不会在页面加载时自动执行动画，它需要交互或异步去触发，比如 CSS 的伪类 :hover，JS 事件或 setTimeout 去执行动画。
开启硬件加速，可以使 transition 运行更加流畅：
1
2
3
| body {
transform: translate3d(0, 0, 0);
}
|
transition-property
不是所有的 CSS 属性都支持 transition，属性存在中间状态，且能计算出中间状态（开始状态和结束状态是具体数值），才支持 transition。像 visibility、display 就不存在中间状态，height: auto 不能计算出中间状态，支持的属性常见有以下。
1
2
3
4
5
| * length/percentage: 真实的数字 如：`word-spacing`, `width`, `vertical-align`, `top`, `right`, `bottom`, `left`, `padding`, `outline-width`, `margin`, `min-width`, `min-height`, `max-width`, `max-height`, `line-height`, `height`, `border-width`, `border-spacing`, `background-position` 等；
* number 真实的（浮点型）数值，如：`zoom`, `opacity`, `font-weight` 等；
* color: RGB 和 Alpha 值，如：`background-color`, `border-color`, `color`, `outline-color` 等 CSS 属性；
* shadow: x, y, blur 和 color，如：text-shadow
* transform list
|
transition-timing-function
1
2
3
4
5
6
| * ease：逐渐变慢（默认值），等同于贝塞尔曲线 (0.25, 0.1, 0.25, 1.0)；
* linear：匀速，等同于贝塞尔曲线 (0.0, 0.0, 1.0, 1.0)；
* ease-in：加速，等同于贝塞尔曲线 (0.42, 0, 1.0, 1.0)；
* ease-out：减速，等同于贝塞尔曲线 (0, 0, 0.58, 1.0)；
* ease-in-out：加速然后减速，等同于贝塞尔曲线 (0.42, 0, 0.58, 1.0)；
* cubic-bezier (n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。实际用到的很少，可以到工具网站中设置值 http://cubic-bezier.com；
|
这几个贝塞尔值的区别：
1
2
3
4
5
6
7
| <ul>
<li class="ease">ease</li>
<li class="ease-in">ease-in</li>
<li class="ease-out">ease-out</li>
<li class="ease-in-out">ease-in-out</li>
<li class="linear">linear</li>
</ul>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| ul {
border: 1px red solid;
padding: 0;
margin: 0;
}
li {
width: 50px;
height: 50px;
margin: 10px 0;
background-color: red;
color: #fff;
}
.ease {
transition: all 4s ease;
}
.ease-in {
transition: all 4s ease-in;
}
.ease-out {
transition: all 4s ease-out;
}
.ease-in-out {
transition: all 4s ease-in-out;
}
.linear {
transition: all 4s linear;
}
ul:hover li {
margin-left: 500px;
}
|
transition 与 animation 区别
transition 是属性过渡动画，animation 是关键帧过渡动画，两种动画触发方式不一样，属性过渡必须通过交互或者异步修改属性值，而关键帧只需要应用即可，可以在交互时，也可以不在交互时。
另外，在 CSS :hover 中，当鼠标移出时，属性值会恢复，发生过渡，transition 的逆向动画被触发，而 animation 关键帧动画不会 reverse，需另声明 reverse 的关键帧来实现，而且需通过事件来应用，要不然进入时会发生 reverse 动画。
Animation
1
| animation: [name duration timing-function delay iteration-count direction fill-mode play-state]
|
1
2
3
4
5
6
7
8
| * animation-name 关键帧名，默认值 none
* animation-duration 动画时长，默认值 0
* animation-timing-function 动画速度，默认值 ease
* animation-delay 延迟，默认值 0
* animation-iteration-count 播放次数，默认值 1
* animation-direction 轮流反向播放，默认值 normal
* animation-play-state 默认值 running（播放）、paused（暂停）
* animation-fill-mode 默认值 none（不改变默认行为）、forwards（保持在最后一个关键帧中定义的状态）、backwards（保持在第一个关键帧中定义的状态）、both
|
animation 属性简写至少要有名称和时长。
animation 使用时需先定义关键帧 @keyframes，再在 animation 中使用关键帧。关键帧中，用百分比来规定变化发生的时间，或用关键词 from (动画开始) 和 to (动画完成)，等同于 0% 和 100%。
1
2
3
4
5
6
7
8
9
| @keyframes fade {
0% {
background: #f00;
}
100% {
background: #000;
}
}
.box {width: 100px; height: 100px; background: #f00; animation: fade 1s;}
|