一、定時器
兩種定時器：
a:一次性定時器，只會執行一次---setTimeout
setTimeout(function(){
console.log("執行了f1");
},1000)
b.循環定時器----setIntervval
var timer = setInterval(function(){
console.log("我是循環定時器");
},2000);
清除定時器
var first = document.getElementById('first');
first.onclick = function(){
var move = setInterval(function(){
first.style.left = first.offsetLeft +5 +"px";
if(first.offsetLeft>=500){
clearInterval(move);
}
},20)
}二、動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>動畫</title>
<style type="text/css">
.redDiv{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0px;
top: 0px;
/* 動畫名稱*/
animation-name: run;
/* 動畫的時長*/
animation-duration:1s;
/* 動畫運動的方式
*/
animation-timing-function:linear;
/* 動畫的延遲*/
animation-delay: 1s;
/* infinite 無限（動畫的次數）*/
animation-iteration-count:1;
/* 動畫方向
reverse反向
normal 正常
alternate 1/3/5..正向 2/4/6反向
alternate-reverse 1/3/5..反向 2/4/6正向
*/
animation-direction: normal;
/* animation-fill-mode
forwards 動畫結束的時候停留在當前位置（動畫之後）
backwards動畫結束的時候回到原來的位置,
在動畫延遲期間，元素的位置在動畫起始的位置（動畫之前）
both:上面兩個都有
*/
animation-fill-mode:both;
/* animation: ;*/
/* -webkit-animation:;*/
/* -moz-animation:;*/
}
@keyframes run{
/*
from{
left: 0px;
}
to{
left: 500px;
background-color: aqua;
}*/
0%{
left: 0px;
}
25%{
left: 250px;
}
70%{
left: 250px;
}
100%{
left: 500px;
background-color: aqua;
}
}
</style>
</head>
<body>
<div class="redDiv"></div>
</body>
<script>
</script>
</html>