好久没用css3制作动画效果了,今天看到个题目有关CSS3 @keyframes规则的,就来学习回顾一下:
先附上我写得一个小加载动画,有些丑,不过咱们要抓住重点,不要在意细节/?:
效果图:
代码(只写了支持Safari 和 Chrome的):
html:
<div class="loading">
<span class="center-block"></span>
<span class="moving-block"></span>
</div>
css:
.loading {
display: table;
margin: 0 auto;
position: relative;
}
.loading .center-block {
display: block;
width: 50px;
height: 50px;
margin: 20px;
background: rgb(40, 171, 214);
}
.loading .moving-block {
display: block;
width: 10px;
height: 10px;
margin: 5px;
background: rgb(40, 171, 214);
position: absolute;
animation: loading 1s linear infinite;
}
@-webkit-keyframes loading {
0% {
top: 0;
left: 0;
bottom: unset;
right: unset;
}
25% {
top: 0;
left: unset;
bottom: unset;
right: 0;
}
50% {
top: unset;
left: unset;
bottom: 0;
right: 0;
}
75% {
top: unset;
left: 0;
bottom: 0;
right: unset;
}
100% {
top: 0;
left: 0;
bottom: unset;
right: unset;
}
}
CSS3 @keyframes 规则:
- 浏览器支持:
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
-
实例:
设置动画:
/* Safari 和 Chrome */
@-webkit-keyframes mycolorchange
{
from {
background: red;
}
to {
background: yellow;
}
}
在我的简易加载动画中,用的使0%-100%这种方式,和from-to使一样的,只不过用百分比可以转化多次,而from-to只能变化一次(一个循环内)。
使用:在需要使用动画的元素样式中添加代码:
/* Safari 和 Chrome */
-webkit-animation: mycolorchange 1s infinite;
其中mycolorchange 为@keyframes 动画名称,1s为动画完成一个周期所花费的秒数(可设置为毫秒),infinite为播放次数,此值代表无限。如果想看到动画效果,至少规定动画的名称和时长。当然,还有一些可选项(转自w3school,点击属性可访问):
@keyframes | 规定动画。 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 |
animation-name | 规定 @keyframes 动画的名称。 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 |
animation-delay | 规定动画何时开始。默认是 0。 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 |
animation-fill-mode | 规定对象动画时间之外的状态。 |