浅谈CSS3动画效果【Animation】

CSS3中的动画是使元素从一种样式逐渐变化为另一种样式的效果。通过设置可以对某一元素改变任意多的样式任意多的次数。通常用百分比来规定变化发生的时间，或者用关键词 "from" 和 "to"，等同于 0% 和 100%（0% 是动画的开始，100% 是动画的完成）为了得到最佳的浏览器支持，我们在定义动画的时候应该始终定义 0% 和 100% 选择器，并且应该定义动画的名称和时长，若忽略时长（默认值是零），则动画不被允许播放。

CSS3属性中有关于制作动画的三个属性：Transform,Transition,Animation。在本文章中将对Animation的用法作一简单的阐述。

小了解：在使用Animation之前，有必要了解一下keyframes规则。keyframes就是Flash中的“关键帧”，@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。

下面是关于浏览器兼容的情况（图片来源于W3Cschool）

实例（一）

HTML代码部分：

<div class="box">
	<div class="Animation" ></div>
</div>

样式代码部分：

        <style>
		    *{
		    margin: 0px;
		    padding: 0px;
		    }
			@keyframes myfirst {
				from {
					background: blanchedalmond;
				}
				to {
					background: violet;
				}
			}
			.Animation {
				height: 60px;
				width: 60px;
				animation: myfirst 5s;
			}
			.box{
				border: 2px #FF69B4 solid;
				height: 360px;
				width: 360px;
				margin: auto;	
				margin-top: 60px;
			}
		</style>

演示效果：（如图所示，小正方形的颜色发生了变化）

解释说明：

实例（二）

小了解：在动画中，若表示元素的动画变换状态，“0%”与“100%”一定要加上“%”，如果没有加上的话，设置的keyframes是无效的，不起任何作用。因为keyframes的单位只接受百分比值。CSS Animation动画效果将会影响元素相对应的css值，在整个动画过程中，元素的变化属性值完全是由animation来控制，动画后面的会覆盖前面的属性值。

HTML代码部分：

<div class="box">
	<div class="Animation"></div>
</div>

样式代码部分：

        <style>
			* {
				margin: 0px;
				padding: 0px;
			}
			@-webkit-keyframes myfirst {
				0% {
					background: red;
					left: 0px;
					top: 0px;
				}
				25% {
					background: yellow;
					left: 200px;
					top: 0px;
				}
				50% {
					background: blue;
					left: 200px;
					top: 200px;
				}
				75% {
					background: green;
					left: 0px;
					top: 200px;
				}
				100% {
					background: red;
					left: 0px;
					top: 0px;
				}
			}
			.Animation {
				position: absolute;
				border-radius:50% ;
				height: 60px;
				width: 60px;
				animation: myfirst 5s;
			}
			.box {
				position: relative;
				border: 2px #FF69B4 solid;
				background-color: antiquewhite;
				height: 360px;
				width: 360px;
				margin: auto;
				margin-top: 60px;
			}
		</style>

演示效果：

解释说明（图片来源于W3Cschool）：

animation-name 用来定义一个动画的名称，其主要有两个值—>自定义动画名、none；
animation-duration 是用来设定元素播放动画所持续的时间长，取值为【time】数值；
animation-timing-function 指元素根据时间的推进来改变属性值的变换速率，是动画的播放方式；主要取值方式如图所示
animation-delay 用来明确元素动画开始时间，取值为【time】为数值；
animation-iteration-count 用来表示动画播放循环的次数，取值为【number】数字，infinite为无限次数循环；
animation-direction 用来指定元素动画播放的方向；
animation-play-state 用来控制元素动画的播放状态；

部分内容来源于网站：

http://www.w3cplus.com/content/css3-animation

http://www.w3school.com

元气少女，加油！

浅谈CSS3动画效果【Animation】

猜你喜欢