动画 -CSDN博客

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>动画</title>
       <style>
           .box{
               width: 300px;
               height: 400px;
               background-color: gold;
               margin: 50px auto;
               /* 2.绑定动画
               animation: 动画名称动画时间次数(infinite无限的)linear匀速;
               */
               animation: xb 10s infinite linear;
           }
           /* 1.创建关键帧 */
           @keyframes xb{
               0{
                   transform: translate(0,0);
               }
               20%{
                   transform: translate(300px,0);
               }
               40%{
                   transform: translate(400px,0);
               }
               60%{
                   transform: translate(-200px,0);
               }
               80%{
                   transform: translate(0,-100px);
               }
               100%{
                   transform: translate(100px,100px);
               }
           }
           @keyframes xm{
               from{ /* 动画开始的状态 */
                   transform: rotate(0);
               }
               to{ /* 动画结束的状态 */
                   transform: rotate(360deg);
               }
           }
           /* 兼容性 */
       </style>
   </head>
   <body>
       <div class="box"></div>
   </body>
</html>

动 画

动画