版权声明：本文为博主原创文章，欢迎转载，转载请标明出处。 https://blog.csdn.net/YeShenLiaoSuiFeng/article/details/80398029
transition-property，CSS 属性的名称；
transition-duration， 过渡效果花费的时间。默认是 0；
transition-timing-function，过渡效果的时间曲线。默认是 "ease"；
transition-delay， 过渡效果何时开始。默认是 0
transition是上面四个简写，如 transition: width 1s linear 2s
其中后面两个属性可以不写。
CSS3 @keyframes 规则
@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。
@keyframes可以使用from{ ... } to { ... } 来表示动画的状态的变化。
@keyframes myfirst{ from {background: red;} to {background: yellow;}}
也可以用百分比来规定变化发生的时间，如 0% 和 100%，在各个具体的 比例加上需要的变化。
@keyframes myfirst{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
div
{
animation:
myfirst
5
s
;
-
webkit-animation:
myfirst
5
s
;
/*
Safari 与 Chrome
*/
}
指定至少这两个CSS3的动画属性绑定向一个选择器：
- 规定动画的名称
- 规定动画的时长