初始animation

 animation属性是多个CSS属性的缩写，这些属性包括：

 animation-name

 animation- duration

 animation-timing-function

 animation-delay

 animation-iteration-count

 animation-direction

 animation-fill-mode

 animation-play-state

 animation:name |duration | timing-function | delay | iteration-count | direction | fill-mode | play-state

 animation:fadeIn 3s ease-in 1s 2 reverse both paused;

 animation属性支持同时应用多个动画规则

 animation属性支持同时应用多个动画规则，例如实现元素淡出和右侧划入同时进行的动画效果.

 正确做法是分隔设置，而不是设置在一个动画规则中.

 .element{
     animation:fadeInSlideInRight .2s;
 }
 
 @keyframes fadeInSlideInRight {
     from {opaction:0; transform:translateX(100%);}
     to{opaction:1;transform:translateX(0%);}
 }

 而是推荐将代码分隔成多个独立的动画规则:

 .element{
     animation:fadeIn .2s,slideInRight .2s;
 }
 @keyframes fadeIn{
     from {
         opaction:0;
     }
     to{
         opaction:1;
     }
 }
 @keyframes slideInRight{
     from{
         transform:translateX(100%);
     }
     to{
         transform:translateX(0%);
     }
 }

 好处在于我们自定义的动画规则可以在其他场合重复利用