关于CSS3的animation动画效果

CSS3的动画效果是用@keyframes 规则来创建的,在@keyframes中写入要改变的css样式,就可以创建一个渐变过程的动画效果.

以下为一个例子:

.addsucc-tips {
    animation: change-tip 2s;    //change-tip是需要做动画效果的css名称
    -webkit-animation: change-tip 2s;
    -moz-animation: change-tip 2s;
    -o-animation: change-tip 2s; 
}

@keyframes change-tip {    //这里的change-tip是动画的名称,要和animation上的名称一致.里面的内容是动画的关键帧改变效果
    0% {opacity: 0.75}
    25% {opacity: 1}
    50% {opacity: 0.5}
    75% {opacity: 0.25}
    100% {opacity: 0}
}

@-webkit-keyframes change-tip {
    0% {opacity: 0.75}
    25% {opacity: 1}
    50% {opacity: 0.5}
    75% {opacity: 0.25}
    100% {opacity: 0}
}

在@keyframes里面除了用百分比来描述关键帧改变外,还可以使用from..to..,比如

@keyframes css-name {  
    from {color: #fff}
    to {color: #000}
}

from..to..适合变化比较少的情况下,如果是多变的,用百分比比较好.

animation还有如下属性对动画进行控制:

animation-duration: 2s;//一次播放动画的时间
nimation-delay: 0s;//延迟多久开始播放动画
animation-iteration-count: 1;//动画播放多少次（infinite代表无限循环）animation-direction: normal; //是否循环交替反向播放动画animation-timing-function: linear; //设置动画如何完成一个周期的动画

tips:animate.css官网利用@keyframes封装了很多动态样式.