前提条件，要让元素左右上下移动位置，首页就需要设置position属性，值为absolute,fixed,relative皆可
一、css
（1）animation
首先需要给要移动的元素设置animation属性：在这个里面设置名称以及移动时间，如果时间不写会默认为0。
接下来需要@keyframes name(刚刚设置的名称)在这个里面就可以设置你需要实现的效果，
form { 多个属性分号隔开 } to{ }
或者 写成百分比的格式
0%{ } 20%{ } 40%{ }
animation属性相当于一个总的属性，可以细分为各个，详情如下
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
animation-delay 规定动画何时开始。
animation-iteration-count 规定动画被播放的次数。
animation-direction 规定动画是否在下一周期逆向地播放。
animation-play-state 规定动画是否正在运行或暂停。
animation-fill-mode 规定对象动画时间之外的状态。
注：要兼容各个浏览器，需要加入不同的前缀
@-moz-keyframes name/* Firefox */
@-webkit-keyframes name/* Safari 和 Chrome */
@-o-keyframes name/* Opera */
代码如下：
.demo {
position:absolute;
width:300px;
height:20px;
border:1px solid #00c892;
animation:myfirst 3s;
}
@keyframes myfirst {
/*from {background: red; left: 20px;}*/
/*to {background: yellow; left: 300px;}*/
0% {background:black;left:10px}
20%{background:red;left:20px;}
40%{background:yellow;left:40px;top:30px}
80%{background:#5DADF1;left:90px}
}
（2）transition
transition:all 2s linear;
div:hover{
background:yellow;
transform:rotate(360deg);
width:800px;
height:300px;
}
transition 简写属性，用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。
注：浏览器需要兼容各个浏览器，前缀同上
二、用计时器实现动画
主要是注意setInterval里面的this指向，可以用bind(this)解决
window.onload =function() {
var oDiv1 =document.getElementById("demo");
oDiv1.onclick =function () {
var timer =setInterval(function () {
this.style.width =this.offsetWidth -10 +"px";
if (this.offsetWidth ==10) {
clearInterval(timer);
}
}.bind(this),1000)
}
}
三、利用API requestAnimationFrame
网友评论