css动画

css中定义动画有2中方式：transtion和animation;

1. transition

       
       
   transition: property duration timing-function delay;

   值	描述
   transition-property	规定设置过渡效果的 CSS 属性的名称。
   transition-duration	规定完成过渡效果需要多少秒或毫秒。
   transition-timing-function	规定速度效果的速度曲线。
   transition-delay	定义过渡效果何时开始。

   
   

2. animation

            定义动画：@keynames(关键字) animationname（名称变量）{

                     ...   （动画内容）

            }

            动画内容： 时间 ｛属性：赋值;属性：赋值;...｝；时间可由from,to组合或者%表示；多个属性变化时通过;隔开；

            栗子:

  
  
@keynames aciton0{
   left:0px;
   top:0px;
}

            调用动画语法：

  
  
animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。s/ms
animation-timing-function	规定动画的速度曲线。linear/ease/ease-in/ease-out/ease-in-out/cubit-bezier(n,n,n,n)
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。n/infinite
animation-direction	规定是否应该轮流反向播放动画。 normal/alternate