css3 - css做动画效果

Question

把红色框内做成那种来回动画效果怎么做啊？

黄舟 · Answer

Run the above code and change it to w3school.

The link is: http://www.w3school.com.cn/cs...

迷茫 · Answer

Give you a link and change the parameters yourself

高洛峰 · Answer

After placing the triangle image, use the class to control the action.

For example

    


.move {
       -webkit-animation-name:'example';
       // other code
}

 @-webkit-keyframes 'example' {
     0% {
        -webkit-transform: translateX(0);
      
     }

     50% {
       -webkit-transform: translateX(100px);
      
     }
     100% {
       -webkit-transform: translateX(0);
     }
  }

   // 补充说明： 
    -webkit-animation-name:'xxx';/*动画属性名，也就是我们前面keyframes定义的动画名*/ 
    -webkit-animation-duration: 10s;/*动画持续时间*/ 
    -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/ 
    -webkit-animation-delay: 2s;/*动画延迟时间*/ 
    -webkit-animation-iteration-count: 10;/*定义循环资料，infinite为无限次*/ 
    -webkit-animation-direction: alternate;/*定义动画方式*

巴扎黑 · Answer

The animation effect of CSS3 is mainly achieved through transition. Use animate to define a tween animation, and the browser will automatically render according to the set time. The code of the two masters above has been perfected, and the subject owner can modify it according to his/her own needs