今天用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:%;height:20px;bottom:;z-index:;
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{
%{
height:40px;
}
%{
height:60px;
}
}
@-webkit-keyframes changeBgColor{
%{
height:40px; }
%{
height:60px; }
}
@-ms-keyframes changeBgColor{
%{
height:40px;
}
%{
height:60px;
}
}
@-o-keyframes changeBgColor{
%{
height:40px;
} %{
height:60px;
}
}
@-moz-keyframes changeBgColor{
%{
height:40px;
}
%{
height:60px;
}
}
</style>
<div class="boult" >
<img src="data:images/boult.png" />
</div>