css3中的动画 @keyframes animation

动画的运用比较重要。接下来我希望针对我自己学习遇到的问题，再总结一下这个属性的使用方法。

 

　　创建一个动画：

　　　　@keyframes 动画名 {样式}

　　引用自己创建的动画：

　　　　animation:动画名  时长（执行多长时间）  效果  开始时间（多久之后开始）;

　　　　　　　　　　其中 效果 开始时间是可以省略的。

　　举个栗子：div获得鼠标焦点时会改变宽度

 1 <div class="dh1"></div>
 2 
 3 <style>
 4         div{
 5             border: 1px solid black;
 6             width: 100px;
 7             height: 100px;
 8         }
 9         /*创建一个动画myDongHua1 内容是在不同时间段改变div的宽度*/
10         @keyframes myDongHua1 {
11             0%{width: 300px;}
12             50%{width: 200px;}
13             100%{width: 600px;}
14         }
15         /*调用动画效果 animation： 动画名 执行时间长度；*/
16         .dh1:hover{
17             animation:myDongHua1 1s;
18         }
19 </style>

 

　　再举个栗子：当div获得鼠标焦点时 颜色会从yellow变成blue

　　　　

 1 <div class="dh2"></div>
 2 
 3 <style>
 4         div{
 5             border: 1px solid black;
 6             width: 100px;
 7             height: 100px;
 8         }
 9         /*创建一个动画myDongHua2 内容是分阶段改变div颜色*/
10         @keyframes myDongHua2{
11             from{background:yellow;}
12             to{background:blue;}
13         }
14         /*调用动画效果 animation： 动画名 执行时间长度；*/
15         .dh2:hover{
16             animation:myDongHua2 3s;
17         }
18 </style>

　　

　　再再举个栗子：当div获得鼠标焦点会出发 CD的旋转动画效果

 1 <div class="CDtum">
 2     <img src="img/cd.png" alt=""/>    <!--此处引入一个CD的圆形图片-->
 3 </div>
 4 
 5 <style>
 6 
 7         /*cd旋转实例*/
 8         .CDtum{
 9             width: 200px;
10             height: 200px;
11         }
12         .CDtum img{
13             width: 200px;
14             height: 200px;
15             border-radius: 100%;
16         }
17         /*设置动画从0度旋转到360度*/
18         @keyframes CDtum{
19             from{transform:rotate(0deg)}
20             to{transform:rotate(360deg)}
21         }
22         /*调用动画 3秒内完成 linear：匀速 3表示只进行三次动画    可以用infinite 来无限执行*/
23         .CDtum img:hover{
24             animation:CDtum 3s linear 3 ;
25         }
26 </style>

 

 

转载于:https://www.cnblogs.com/Lin-Yi/p/6799250.html