动漫效果 animation

@keyframes（定义动画的具体动作）

1. @keyframes  anim1 {
   
2. from{left:0px;background-color:red;}
   
3. to {left:250px;}
   
4. }

复制代码

或者

1. @keyframes mymove {
   
2. 0%   {left: 0px;}
   
3. 25%  {left: 200px;}
   
4. 50%  {left: 100px;}
   
5. 75%  {left: 200px;}
   
6. 100% {left: 0px;}
   
7. }

复制代码

调用 animation: name duration timing-function delay iteration-count direction fill-mode play-state;

1. animation: anim1 3s ease-out 1s infinite alternate forwards;

复制代码

解释

• animation-direction（指定动画是否反向播放）
  

它的值分别有： 动画正常运行／动画反方向运行／动画先正常运行再反方向运行，并持续交替运行／保持原有属性的值／继承母元素的设定
对应设置如下：

1. animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

复制代码

• animation-fill-mode（指定动画不运行时的状态）
  

它的值分别有： 动画开始之前或结束之后，不会提供给该当元素以任何样式/当动画结束时，该当元素将保持动画结束时的状态/动画开始之前，该当元素使用动画开始时的样式/动画开始前，该当元素使用动画开始时的样式，结束后，该当元素使用动画结束时的样式/保持原有属性的值/继承母元素的设定
对应设置如下：

1. animation-fill-mode: none|forwards|backwards|both|initial|inherit;

复制代码

• animation-play-state（定义动画是运行还是暂停）
  

它的值分别有： 指定动画暂停/指定动画运行/保持原有属性的值/继承母元素的设定
对应设置如下：

1. animation-play-state: paused/running/initial/inherit;

复制代码

• animation-timing-function（定义动画的速度曲线）
  

它的值分别有：匀速运行/开始缓慢，中途加速，最终以减速结束/以缓慢运行开始/以缓慢运行结束/开始缓慢运行,又逐渐加速，最后又减速直到结束/使用cubic-bezier函数定义自己的值，值为0～1之间的数值/保持原有属性的值/继承母元素的设定
对应设置如下

1. animation-timing-function: linear/ease/ease-in/ease-out/cubic-bezier(n,n,n,n)/initial/inherit;

复制代码