css动画 animation

今天用css做了一个简单的三角上下移动的一个小动画，说白了就是在改变该物体的height值。除了这个方法，还可以用js。

一、在用css写动画时，一定要记住兼容性问题。如何解决该兼容性？在前面加内核前缀。

　　opera的内核是-o-;    

　　-moz代表firefox浏览器私有属性

　　-ms代表IE浏览器私有属性
　　-webkit代表chrome、safari私有属性

二、动画的属性：

　　animation-name:调用动画的名称

　　animation-duration:动画执行的时长

　　animation-timing-function:时间速度曲线函数

　　　　　取值：匀速linear--常用  ease慢速    ease-in迈速开始，加速效果     ease-out快速开始，慢速结束    ease-in-out:慢开始和结束，先加速后减速     

     animation-iteration-count:播放次数

　　　　　取值：(具体数值/循环播放infinite)

　　animation-direction:动画的播放方向

　　　　　取值：normal默认正向   reverse:逆向     alternate:轮流  基数为正，偶数为倒

　　谷歌不支持以上属性，所以记得加前缀-wekit

三、声明动画

　　1、通过@keyframes声明动画的关键帧

　　2、为元素调用动画

<style>
    .boult{
        position:fixed;width:100%;height:20px;bottom:0;z-index:12;
        text-align:center;margin-bottom:20px;
    }
    .boult{
        animation-name:changeBgColor;
        animation-duration:2s;
        animation-timing-function:linear;
        animation-iteration-count:infinite;
        animation-direction:alternate;
        -webkit-animation-name:changeBgColor;
        -webkit-animation-duration:2s;
        -webkit-animation-timing-function:linear;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-direction:alternate;
    }
    @keyframes changeBgColor{
        0%{
            height:40px;            
        }
        100%{
            height:60px;
        }
    }
    @-webkit-keyframes changeBgColor{
        0%{
            height:40px;
        
        }        
        100%{
            height:60px;
            
        }
    }
    @-ms-keyframes changeBgColor{
        0%{
            height:40px;        
        }        
        100%{
            height:60px;            
        }
    }
    @-o-keyframes changeBgColor{
        0%{
            height:40px;        
        }
        
        100%{
            height:60px;            
        }
    }
    @-moz-keyframes changeBgColor{
        0%{
            height:40px;        
        }        
        100%{
            height:60px;            
        }
    }
</style>
<div class="boult" >
    <img src="images/boult.png"    />
</div>