实现一个持续动画效果的几种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现持续的动画效果</title>
<style>
div{
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: #5b5;
/* animation: move 5s linear 1s infinite; 第一种方法 */
}
@keyframes move{
from{
left: 0;
}
to{
left: 500px;
}
}
</style>
</head>
<body>
<div id="d"></div>
<script type="text/javascript">
console.log('============第二种===========')
var a = document.getElementById('d')
var flag = true, left = 0;
setInterval(() => {
left == 500 ? flag = false : (left == 0 ? flag = true : '');
flag ? a.style.left = `${left++}px` : a.style.left = `${left--}px`
}, 10);
console.log('============第三种===========')
// 兼容性处理
window.requestAnimFrame = (function() {
return (
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback, element) {
window.setTimeout(callback, 10)
}
)
})()
function render() {
left == 500 ? flag = false : (left == 0 ? flag = true : '');
flag ? a.style.left = `${left++}px` : a.style.left = `${left--}px`
}
(function loop() {
render()
requestAnimFrame(loop)
})()
</script>
</body>
</html>