版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012468376/article/details/60865911
二、CSS3过渡(transition)
transition属性定义一个元素两种状态之间的过渡。是下面四个属性的简写：
transition-property, transition-duration, transition-timing-function, transition-delay
不同的状态可以通过伪类像:hover、:active来定义。也可以通过js代码来动态的改变。
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>过渡</title>
<style> .box {border: 1px solid #000; margin: 100px auto;
display: block; width: 100px; height: 100px; background-color: #0000FF;
transition: width 2s linear 1s; }
.box:hover { width: 200px; } </style>
</head><body>
<div class="box"></div>
</body>
</html>
如果想同时定义多个过渡属性，则可以使用逗号分开。
transition: width 2s linear 1s, height 3s linear 2s;
过渡属性和过渡周期不能省略。
过渡函数主要有以下几个值：
如果不设置默认是：ease
transition-timing-function: ease;transition-timing-function: ease-in;transition-timing-function: ease-out;transition-timing-function: ease-in-out;transition-timing-function: linear;transition-timing-function: step-start;transition-timing-function: step-end;
延迟时间如果不设置默认是 0s
三、CSS3动画(animation)
我们在使用 transition实现动画的时候只能指定要改变的属性的开始值和结束值，然后在这两个值之间进行平滑过渡的方式来实现动画效果，因此不能实现比较复杂的动画效果
而animation通过定义多个关键帧( keyframes )以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。
下面的表格列出了 @keyframes 规则和所有动画属性：
| 属性 |
描述 |
CSS |
| @keyframes |
规定动画。 |
3 |
| animation |
所有动画属性的简写属性，除了 animation-play-state 属性。 |
3 |
| animation-name |
规定 @keyframes 动画的名称。 |
3 |
| animation-duration |
规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
3 |
| animation-timing-function |
规定动画的速度曲线。默认是 “ease”。 |
3 |
| animation-delay |
规定动画何时开始。默认是 0。 |
3 |
| animation-iteration-count |
规定动画被播放的次数。默认是 1。 |
3 |
| animation-direction |
规定动画是否在下一周期逆向地播放。默认是 “normal”。 |
3 |
| animation-play-state |
规定动画是否正在运行或暂停。默认是 “running”。 |
3 |
| animation-fill-mode |
规定对象动画时间之外的状态。 |
3 |
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>动画</title>
<style>div{ width : 200px; height : 200px; margin: 200px auto; background-color : pink;animation-name: my_animation; animation-duration: 3s; animation-iteration-count: 1; animation-direction: reverse; animation-delay:2s; animation-timing-function: linear; animation-fill-mode: both; }@keyframes my_animation { 0%{ width: 200px; height: 200px; } 100%{ width: 600px; height: 600px;}} </style>
</head>
<body>
<div></div>
</body>
</html>
html
@keyframes 动画名{
//定义关键帧
}
关键帧定义时可以使用from、to、百分比
from表示0%、to表示100%
可以定义很多关键帧。20%、30%、…
百分比其实是指的时间完成的百分比。(考虑以前学习过的归一化的时间)
animation-timing-function可以是以下的关键值：
animation-timing-function: ease;animation-timing-function: ease-in;animation-timing-function: ease-out;animation-timing-function: ease-in-out;animation-timing-function: linear;animation-timing-function: step-start;animation-timing-function: step-end;
也可以是下面的函数：
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);animation-timing-function: steps(4, end);
https://isux.tencent.com/css3/tools.html
例如：
cubic-bezier(0.315, -0.575, 0.680, 1.650)
对应的曲线：
steps(4, end): 表示每两个关键帧中间共需要再填充3个关键帧。
