css、jq实现移动（动画）效果

版权声明：本文为博主原创文章，未经博主允许不得转载。（转载请指明出处） https://blog.csdn.net/zhangjing0320/article/details/81639644

！！！！！！！！！！！建议先看这些有助理解代码！！！！！！！！！！！！关于各个参数啊的设置，虽然特别多，但是看一遍有个大概的印象，等遇到你可以再查。

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：

• animation：http://www.w3school.com.cn/jquery/effect_animate.asp

一、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>

效果：

代码都可以直接跑看效果。