通过css制作animate动画

在需要动画的元素上添加  animation class名,然后给其设置值来实现动画

第一步 : 根据属性设置自己所需要的值

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

属性详情 :

animation-name 规定需要绑定到选择器的 keyframe 名称。

animation-duration 规定完成动画所花费的时间，以秒或毫秒计。

animation-timing-function  规定动画的速度曲线。

    linear 动画从头到尾的速度是相同的。

    ease 默认。动画以低速开始，然后加快，在结束前变慢。  

    ease-in  动画以低速开始。

    ease-out 动画以低速结束。

    ease-in-out  动画以低速开始和结束。  

    cubic-bezier(n,n,n,n)  在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

animation-delay  规定在动画开始之前的延迟。

animation-iteration-count  规定动画应该播放的次数。

    n  定义动画播放次数的数值。

    infinite 规定动画应该无限次播放。

animation-direction  规定是否应该轮流反向播放动画。

    normal 默认值。动画应该正常播放。  

    alternate  动画应该轮流反向播放。

 

第二步 :

根据需求开始写运动轨迹,如

@keyframes animate_ugc {

  from {

    width: 60px;

    height: 60px;

    right: 40px;

  }

  to {

    width: 55px;

    height: 55px;

    left: 40px;

  }

}

 

注意 :

@keyframes 需要添加兼容性

@-webkit-keyframes

@-moz-keyframes

@-ms-keyframes

@-o-keyframes