动漫效果 animation
@keyframes（定义动画的具体动作）@keyframesanim1 {
from{left:0px;background-color:red;}
to {left:250px;}
}或者
@keyframes mymove {
0% {left: 0px;}
25%{left: 200px;}
50%{left: 100px;}
75%{left: 200px;}
100% {left: 0px;}
}调用 animation: name duration timing-function delay iteration-count direction fill-mode play-state;
animation: anim1 3s ease-out 1s infinite alternate forwards;解释
[*]animation-direction（指定动画是否反向播放）
它的值分别有： 动画正常运行／动画反方向运行／动画先正常运行再反方向运行，并持续交替运行／保持原有属性的值／继承母元素的设定
对应设置如下：animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;
[*]animation-fill-mode（指定动画不运行时的状态）
它的值分别有： 动画开始之前或结束之后，不会提供给该当元素以任何样式/当动画结束时，该当元素将保持动画结束时的状态/动画开始之前，该当元素使用动画开始时的样式/动画开始前，该当元素使用动画开始时的样式，结束后，该当元素使用动画结束时的样式/保持原有属性的值/继承母元素的设定
对应设置如下：animation-fill-mode: none|forwards|backwards|both|initial|inherit;
[*]animation-play-state（定义动画是运行还是暂停）
它的值分别有： 指定动画暂停/指定动画运行/保持原有属性的值/继承母元素的设定
对应设置如下：animation-play-state: paused/running/initial/inherit;
[*]animation-timing-function（定义动画的速度曲线）
它的值分别有：匀速运行/开始缓慢，中途加速，最终以减速结束/以缓慢运行开始/以缓慢运行结束/开始缓慢运行,又逐渐加速，最后又减速直到结束/使用cubic-bezier函数定义自己的值，值为0～1之间的数值/保持原有属性的值/继承母元素的设定
对应设置如下animation-timing-function: linear/ease/ease-in/ease-out/cubic-bezier(n,n,n,n)/initial/inherit;
页:
[1]