前提條件，要讓元素左右上下移動(dòng)位置，首頁(yè)就需要設(shè)置position屬性，值為absolute,fixed,relative皆可
一、css
（1）animation
? ? ? ? 首先需要給要移動(dòng)的元素設(shè)置animation屬性：在這個(gè)里面設(shè)置名稱(chēng)以及移動(dòng)時(shí)間，如果時(shí)間不寫(xiě)會(huì)默認(rèn)為0。
? ? 接下來(lái)需要@keyframes name(剛剛設(shè)置的名稱(chēng))在這個(gè)里面就可以設(shè)置你需要實(shí)現(xiàn)的效果，
form {? ? 多個(gè)屬性分號(hào)隔開(kāi)? } to{? ? ? ? }
或者 寫(xiě)成百分比的格式
0%{????}? 20%{? ? }? ?40%{? ? }?
animation屬性相當(dāng)于一個(gè)總的屬性，可以細(xì)分為各個(gè)，詳情如下
@keyframes????????規(guī)定動(dòng)畫(huà)。????
animation????????????所有動(dòng)畫(huà)屬性的簡(jiǎn)寫(xiě)屬性，除了 animation-play-state 屬性。?
animation-name????規(guī)定 @keyframes 動(dòng)畫(huà)的名稱(chēng)。?
animation-duration規(guī)定動(dòng)畫(huà)完成一個(gè)周期所花費(fèi)的秒或毫秒。?
animation-timing-function????????規(guī)定動(dòng)畫(huà)的速度曲線(xiàn)。默認(rèn)是 "ease"。?
animation-delay????????規(guī)定動(dòng)畫(huà)何時(shí)開(kāi)始。?
animation-iteration-count????規(guī)定動(dòng)畫(huà)被播放的次數(shù)。?
animation-direction????????規(guī)定動(dòng)畫(huà)是否在下一周期逆向地播放。?
animation-play-state????????規(guī)定動(dòng)畫(huà)是否正在運(yùn)行或暫停。?
animation-fill-mode????????規(guī)定對(duì)象動(dòng)畫(huà)時(shí)間之外的狀態(tài)。?
注：要兼容各個(gè)瀏覽器，需要加入不同的前綴
@-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????????????????????????????簡(jiǎn)寫(xiě)屬性，用于在一個(gè)屬性中設(shè)置四個(gè)過(guò)渡屬性。?
transition-property?????????????規(guī)定應(yīng)用過(guò)渡的 CSS 屬性的名稱(chēng)。?
transition-duration???????????????定義過(guò)渡效果花費(fèi)的時(shí)間。默認(rèn)是 0。?
transition-timing-function????規(guī)定過(guò)渡效果的時(shí)間曲線(xiàn)。默認(rèn)是 "ease"。?
transition-delay????????????????????規(guī)定過(guò)渡效果何時(shí)開(kāi)始。?
注：瀏覽器需要兼容各個(gè)瀏覽器，前綴同上
二、用計(jì)時(shí)器實(shí)現(xiàn)動(dòng)畫(huà)
主要是注意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
