css3 animation动画使用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7   <title>Document</title>
 8   <style media="screen">
 9     .basic{
10       background-color: red;
11       /*  300px;
12       height: 300px; */
13     }
14 
15     @keyframes animate1
16   {
17   0%   {background: red;}
18   25%  {background: yellow;}
19   50%  {background: blue;}
20   100% {background: green;}
21   }
22 
23   @-moz-keyframes animate1 /* Firefox */
24   {
25   0%   {background: red;}
26   25%  {background: yellow;}
27   50%  {background: blue;}
28   100% {background: green;}
29   }
30 
31   @-webkit-keyframes animate1 /* Safari 和 Chrome */
32   {
33   0%   {background: red;}
34   25%  {background: yellow;}
35   50%  {background: blue;}
36   100% {background: green;}
37   }
38 
39   @-o-keyframes animate1 /* Opera */
40   {
41   0%   {background: red;}
42   25%  {background: yellow;}
43   50%  {background: blue;}
44   100% {background: green;}
45   }
46 
47   .animate2 {
48 
49   animation: animate1 5s;
50   -moz-animation: animate1 5s;    /* Firefox */
51   -webkit-animation: animate1 5s;    /* Safari 和 Chrome */
52   -o-animation: animate1 5s;    /* Opera */
53   
54   }
55 
56   </style>
57 </head>
58 <body>
59   <div class="basic" id="div1">
60     hello world.
61   </div>
62 
63   <button type="button" name="button">点击应用动画</button>
64 
65   <script type="text/javascript">
66     const btn = document.getElementsByName('button')[0];
67     const div = document.getElementById("div1");
68     btn.addEventListener('click', ()=>{
69       console.log("点击按钮。。。");
70       if(div.classList.contains("basic")){
71         div.classList.remove("basic");
72       }
73       div.classList.add("animate2");
74     });
75   </script>
76 </body>
77 </html>

1. 使用@keyframes定义一个动画效果。

 1 @keyframes animate1
 2   {
 3   0%   {background: red;}
 4   25%  {background: yellow;}
 5   50%  {background: blue;}
 6   100% {background: green;}
 7   }
 8 
 9   @-moz-keyframes animate1 /* Firefox */
10   {
11   0%   {background: red;}
12   25%  {background: yellow;}
13   50%  {background: blue;}
14   100% {background: green;}
15   }
16 
17   @-webkit-keyframes animate1 /* Safari 和 Chrome */
18   {
19   0%   {background: red;}
20   25%  {background: yellow;}
21   50%  {background: blue;}
22   100% {background: green;}
23   }
24 
25   @-o-keyframes animate1 /* Opera */
26   {
27   0%   {background: red;}
28   25%  {background: yellow;}
29   50%  {background: blue;}
30   100% {background: green;}
31   }

2.将动画效果先绑定到css类上。

1 .animate2 {
2 
3   animation: animate1 5s;
4   -moz-animation: animate1 5s;    /* Firefox */
5   -webkit-animation: animate1 5s;    /* Safari 和 Chrome */
6   -o-animation: animate1 5s;    /* Opera */
7   
8   }

3.将动画效果应用到指定的元素上。

const btn = document.getElementsByName('button')[0];
    const div = document.getElementById("div1");
    btn.addEventListener('click', ()=>{
      console.log("点击按钮。。。");
      if(div.classList.contains("basic")){
        div.classList.remove("basic");
      }
      div.classList.add("animate2");
    });

当点击按钮时，就会将定义的动画效果应用到div上。