一、定时器
两种定时器:
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>