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>

 

posted @ 2016-05-23 19:03  兌_onlyone  阅读(195)  评论(0编辑  收藏  举报