css动画-优快云博客

本文链接：https://blog.youkuaiyun.com/ZhouCcx/article/details/148444864

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