CSS3 @keyframes规则------简易的加载动画

好久没用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 规则和所有动画属性

@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	规定对象动画时间之外的状态。