DIV代码

<div id="con">
<img src="images/brand4.png">
<div>


css代码

#con img{
    animation: rotate 3s linear 0s  infinite;
    -webkit-animation: rotate 3s linear 0s  infinite;
    -moz-animation:rotate 3s linear 0s infinite;
    -ms-animation: rotate 3s linear 0s infinite;
    -o-animation: rotate 3s linear 0s infinite;
    
}
@keyframes rotate{
    0%{ margin-top:0px;}
    50%{ margin-top:20px;}
    100%{margin-top:0px;}
}
@-webkit-keyframes rotate{
    0%{ margin-top:0px;}
    50%{ margin-top:20px;}
    100%{margin-top:0px;}
}
@-moz-keyframes rotate{
    0%{ margin-top:0px;}
    50%{ margin-top:20px;}
    100%{margin-top:0px;}
}
@-ms-keyframes rotate{
    0%{ margin-top:0px;}
    50%{ margin-top:20px;}
    100%{margin-top:0px;}
}
@-o-keyframes rotate{
    0%{ margin-top:0px;}
    50%{ margin-top:20px;}
    100%{margin-top:0px;}
}

图文解析

语法

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

CSS3 @keyframes 规则

语法

值	说明
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。 合法值： 0-100% from (和0%相同) to (和100%相同) 注意： 您可以用一个动画keyframes-selectors。
css-styles	必需的。一个或多个合法的CSS样式属性