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
元气少女,加油!