css 动画animation_css animation-CSDN博客

本文链接：https://blog.csdn.net/ZkMao1007/article/details/78449272

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
   <style>
       @-webkit-keyframes 'wobble' {
       0% {
           margin-left: 100px;
           background: green;
       }
       40% {
           margin-left: 250px;
           background: orange;
       }
       60% {
           margin-left: 350px;
           background: blue;
       }
       100% {
           margin-left: 1000px;
           background: red;
       }
      }

      .demo1 {
       width: 50px;
       height: 50px;
       margin-left: 100px;
       background: blue;
       -webkit-animation-name:'wobble';/*动画属性名，也就是我们前面keyframes定义的动画名*/
       -webkit-animation-duration: 2s;/*动画持续时间*/
       -webkit-animation-timing-function: ease-in-out; /*动画频率，和transition-timing-function是一样的*/
       -webkit-animation-delay: 2s;/*动画延迟时间*/
       -webkit-animation-iteration-count: 3;/*定义循环资料，infinite为无限次*/
       -webkit-animation-direction: alternate;/*定义动画方式*/
      }
   </style>
</head>

<body>
   <div class="demo1">
    </div>
</body>
</html>