CSS3之动画Animation

落日映苍穹つ 2022-09-09 10:55 251阅读 0赞

CSS3发布已经有很多日子了，现在很多网站都开始尝试用CSS3制作一些好玩的东西，甚至有些公司把CSS3作为制作网站的技术来广泛应用。今天和大家分享CSS3之动画Animation的一些小东东，希望能对大家有所帮助。

**一、Animation的语法**

1、@keyframes——插入关键帧

(1)FormTo形式：

@keyframes demo {
         from {
           Properties:Properties value;
         }
         Percentage {
           Properties:Properties value;
         }
         to {
           Properties:Properties value;
         }
    }

(2)百分比的形式：

@keyframes demo {
          0% {
             Properties:Properties value;
          }
          Percentage {
             Properties:Properties value;
          }
          100% {
             Properties:Properties value;
          }
    }

2、animation-name——定义动画的名称

animation-name: none | “动画的名称”;

(1)动画的名称是由Keyframes创建的动画名，这里必须和创建的动画名保持一致。如果不一致,将不能实现任何动画效果

(2)none为默认值，当值为none时，将没有任何动画效果

3、animation-duration

animation-duration: time (s)

animation-duration是指定元素播放动画所持续的时间，取值为数值，单位为秒(s)，其默认值为“0”。

4、animation-timing-function

animation-timing-function:ease(缓冲) || ease-in(加速) || ease-out(减速) || ease-in-out(先加速后减速) || linear(匀速) || cubic-bezier(自定义一个时间曲线)

animation-timing-function是用来指定动画的播放方式，具有以下六种变换方式：ease(缓冲);ease-in(加速);ease-out(减速);ease-in-out(先加速后减速);linear(匀速);cubic-bezier(自定义一个时间曲线)。

5、animation-delay

animation-delay: time(s)

animation-delay:是用来指定元素动画开始时间。取值为数值，单位为秒(s)，其默认值为“0”。这个属性和animation-duration使用方法是一样的。

6、animation-iteration-count

animation-iteration-count:infinite || number

animation-iteration-count是指定元素播放动画的循环次数，其取值为数字，默认值为“1”或者infinite(无限次数循环)。

7、animation-direction

animation-direction: normal || alternate

animation-direction是指定元素动画播放的方向，如果是normal，那么动画的每次循环都是向前播放;如果是alternate，那么动画播放在第偶数次向前播放，第奇数次向反方向播放。

8、animation-play-state

animation-play-state:running || paused

animation-play-state主要是用来控制元素动画的播放状态。其主要有两个值，running和paused，其中running为默认值。这个属性目前很少内核支持，所以只是稍微提一下。

**二、Animation的综合写法**

animation:定义动画的名称 || 动画持续时间 || 动画的播放方式 || 动画开始时间 || 动画循环次数 || 动画播放方向

**三、Animation的兼容情况**

** **

![梦龙小站][SouthEast]

**四、Animation的小实例**

CSS代码：

/*全局样式*/
    .wraper {width:960px;margin:0 auto;}
    h1 b {font-size:20px;}
    li a,h1 b span {text-decoration:none;color:#f00;}
    li a:hover {text-decoration:underline;}
    
    
    /*过渡的样式*/
    #timings-demo {border: 1px solid #ccc;padding: 10px;height: 300px;width: 400px;}
    .btn {width: 100px;height: 50px;line-height: 50px;text-align: center;color: #fff;margin-bottom: 10px;display:block;margin-left:145px;
    	-webkit-border-radius: 5px;
    }
    .btn1 {
    	-webkit-box-shadow: inset 0 0 5px rgba(102, 153, 0,0.5);
    }
    .btn2 {
    	-webkit-box-shadow: 1px 1px 5px rgba(132, 123,100,0.5);
    }
    .btn3 {
    	background:-webkit-linear-gradient(top, red, blue);
    }
    .btn4 {
    	text-shadow: none
    }
    .btn5 {
    	margin-left:145px;
    }
    
    /*逐渐变慢改变背景效果：*/        
    .btn1 {background: #f36;}
    #timings-demo:hover .btn1 {
    	-webkit-animation: 'buttonLight' 3s ease 0.3s;
    }      
    /*加速旋转效果*/  
    .btn2 {background: #f36;}
    #timings-demo:hover .btn2 {
    	-webkit-animation: 'rotate' 3s ease-in 0.3s;
    }     
    /*减速渐变背景效果*/  
    #timings-demo:hover .btn3 {
    	-webkit-animation: 'gradient' 3s ease-out 0.3s;
    } 
    /*匀速文字阴影效果*/  
    .btn4 {background: #f36;}
    #timings-demo:hover .btn4 {
    	-webkit-animation: 'gradient' 3s ease-out 0.3s;
    }
    /*自定义一段曲线左边距效果*/  
    .btn5 {background: #f36;}
    #timings-demo:hover .btn5 {
    	-webkit-animation: 'marginLeft' 3s cubic-bezier(0.250, 1.650, 0.795, -0.425) 0.3s;
    }
    
    
    /*逐渐变慢改变背景动画帧数*/
    @-webkit-keyframes 'buttonLight' {
    	0% {
    		 background:#f36;
    		 color:#fff;
    	}
    	50% {
    		background:#fff;
    		color:green;
    	}
    	100% {
    		 background:#f36;
    		 color:#fff;
    	}
    }
    /*加速旋转动画帧数*/
    @-webkit-keyframes 'rotate' {
    	0% {
    		 -webkit-transform: rotate(0deg);
    		 -webkit-box-shadow: 1px 1px 5px rgba(132, 123,100,0.5);
    	}
    	50% {
    		 -webkit-transform: rotate(180deg);
    		 -webkit-box-shadow: 0px -3px 5px #000;
    	}
    	100% {
    		 -webkit-transform: rotate(0deg);
    		 -webkit-box-shadow: 1px 1px 5px rgba(132, 123,100,0.5);
    	}
    }
    /*减速渐变背景动画帧数*/
    @-webkit-keyframes 'gradient' {
    	0% {
    		 background:-webkit-linear-gradient(top, red, blue);
    	}
    	50% {
    		 background:-webkit-linear-gradient(top, blue, red);
    	}
    	100% {
    		 background:-webkit-linear-gradient(top, red, blue);
    	}
    }
    /*匀速文字阴影动画帧数*/
    @-webkit-keyframes 'gradient' {
    	0% {
    		text-shadow: none
    	}
    	50% {
    		 text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de;
    	}
    	100% {
    		 text-shadow: none
    	}
    }
    /*自定义一段曲线左边距动画帧数*/
    @-webkit-keyframes 'marginLeft' {
    	0% {
    		margin-left:145px;
    	}
    	50% {
    		margin-left:180px;
    	}
    	100% {
    		margin-left:145px;
    	}
    }

HTML代码：

<div id="timings-demo">
    		<a class="btn btn1" href="http://justflyhigh.com" target="_blank" title="IT部落阁">IT部落阁</a>
    		<a class="btn btn2" href="http://justflyhigh.com" target="_blank" title="IT部落阁">IT部落阁</a>
    		<a class="btn btn3" href="http://justflyhigh.com" target="_blank" title="IT部落阁">IT部落阁</a>
    		<a class="btn btn4" href="http://justflyhigh.com" target="_blank" title="IT部落阁">IT部落阁</a>
    		<a class="btn btn5" href="http://justflyhigh.com" target="_blank" title="IT部落阁">IT部落阁</a>
    	</div>

预览地址：http://www.leemagnum.com/dhsl.html

CSS3之动画Animation就为大家介绍到这里了。CSS3之过渡Transition的神奇之处远不止上面这些，还可以做很多好玩的小东东。在今后，想必CSS3之过渡 Transition的应用会很广泛，掌握CSS3之过渡Transition可谓是当务之急呀。更多关于CSS3的东东还望关注本blog有关CSS3 的更新哟。感谢大家长期以来对本blog的支持与厚爱。

[SouthEast]: /images/20220829/c7fb4fdc4a2045a49fb247f84442b400.png