!!!!!!!!!!!建议先看这些有助理解代码!!!!!!!!!!!!关于各个参数啊的设置,虽然特别多,但是看一遍有个大概的印象,等遇到你可以再查。
css:
- @keyframes: http://www.w3school.com.cn/cssref/pr_keyframes.asp
- animation: http://www.w3school.com.cn/cssref/pr_animation.asp
https://zhidao.baidu.com/question/1893989528889518500.html
jq:
一、CSS
代码:
<style>
div
{
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
animation-iteration-count: 1; //规定循环播放次数,否则一直会循环下去
-webkit-animation-fill-mode: forwards; // 设置动画完成定格到最后一帧,不设置播放完恢复原来的位置
animation-fill-mode: forwards;
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
</style>
<div>Internet Explorer 9 及更早IE版本不支持 animation 属性。</div>
结果:
二、jq
代码:
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function(){
$("#toRight").animate({
marginLeft:"+=100px"
},3000);
})
</script>
<div id="toRight">右移</div>
效果:
代码都可以直接跑看效果。