CSS3 动画效果简要描述

2017-02-10

其实本来想直接放我的动画库的，这里先做基础只是的奠基，H5的动画其实一直被认为有些问题，使用CSS3可以实现的动画就不用H5吧。首先需要声明的是CSS动画（animation）再IE6~9是不兼容的，怎么办，静态背景图替代之

最基本结构，你懂的

1
2
3

<div class="box">
    <i>今天吃点啥</i>
</div>

首先写动画过程

关键词keyframes,构建动画的语法是
@keyframes name{ 0%{code}~100%{code}}，具体keyframes声明（注意多引擎声明），改动画效果的名字name,代码体里，从0%~100%，元素的变化过程，具体看代码

@keyframes _t {
    0% {background: #bebebe;left: 0px;top: 0px;transform: rotate(0deg);}
    25% {background: #464646;left: 100px;top: 0px;transform: rotate(10deg);}
    50% {background: #d6d6d6;left: 150px;top: 0px;transform: rotate(20deg);}
    55% {background: #fafafa;left: 200px;top: 0px;transform: rotate(40deg);}
    60% {background: #fafafa;left: 200px;top: 50px;transform: rotate(0deg);}
    70% {background: #d6d6d6;left: 200px;top: 100px;transform: rotate(0deg);}
    80% {background: #464646;left: 200px;top: 50px;transform: rotate(-40deg);}
    95% {background: #b4b4b4;left: 50px;top: 50px;transform: rotate(-360deg);}
    100% {background: #bebebe;left: 0px;top: 0px;transform: rotate(0deg);}
}
/*剩下的@-webkit-keyframes /-o-keyframes/-moz-keyframse等省略了就*/

简要说一下上面的代码，即刚开始的时候，元素背景色为#bebebe,定位为左上角，transform为变形，rotate（旋转）角度0deg；当动画进行到25%时，背景色变为#464646，位置水平移动100px,角度10deg.依次类推。知道100%时恢复为初始，这么一个循环过程，当然你可以设定无限个进度节点，大量的动画效果。

元素引入动画

构建好动画后，为元素引入动画即可，基本语法为
ele{animation: name duration timing-function delay iteration-count direction;}
animation声明，当然一贯的，你同时要有私有声明-webkit-animation/-moz/-o，name就是引入的动画名，本案例为_t，duration(规定动画时长，ms计量)，timing-function（速度曲线，linear/ease-in-out等），delay（延迟执行动画时间），iteration-count（重复动画默认为1，可以为多次，infinite则表示无限循环），direction(value:normal正常播放/alternate次轮反向播放 )


div{
    position: relative;
    width: 200px;
    height: 200px;
    line-height: 200px;
    background: #bebebe;
    text-align: center;
    /*引入动画_t,单轮7s执行结束，执行曲线ease-in-out，延迟2s 反复播放，次轮反向*/
    -moz-animation: _t 7s ease-in-out 2s infinite alternate;
    -webkit-animation:_t 7s ease-in-out 2s infinite alternate;
    -o-animation: _t 7s ease-in-out 2s infinite alternate;
    animation: _t 7s ease-in-out 2s infinite alternate;
}

恕在下没有制作gif图，所以這里没有效果图展示。

嵌套动画

动画效果可以元素嵌套，比如建立动画效果_i

1	@keyframes _i {0% {color:#fafafa}25% {color:red}50% {color: burlywood}55% {color:aquamarine}60% {color:aqua}70% {color: aquamarine}80% {color:burlywood}95% {color:red}100% {color:#fafafa}}

再div所含i元素中嵌套

i{
    font-family: "Microsoft YaHei";
    font-size:14px;
    color: #fafafa;
    animation: _i 7s ease-in-out 2s infinite alternate;
    -moz-animation: _i 7s ease-in-out 2s infinite alternate;
    -webkit-animation:_i 7s ease-in-out 2s infinite alternate;
    -o-animation: _i 7s ease-in-out 2s infinite alternate;
}

恕在下没有制作gif图，所以這里没有效果图展示。