CSS3使用AnimationEnd为同一个元素添加多个动画效果

最新推荐文章于 2021-08-04 00:47:25 发布

weixin_30333885

最新推荐文章于 2021-08-04 00:47:25 发布

阅读量262

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/dingquanjun/p/4958209.html

版权

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="@my_programmer"> 
<title>webkitAnimationEnd</title> 
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="format-detection" content="telephone=no"/> 
<style type="text/css"> 
#div{ width:200px; height:200px; background:#f60; margin:100px auto;
} 
.fade{ -webkit-animation: fadeOut 2s 1 ease-in-out;}
.change{ -webkit-animation: transform 1s 2 ease; } 
@-webkit-keyframes transform { 
0% { -webkit-transform: scale(1)} 
30% { -webkit-transform: scale(2)} 
60% { -webkit-transform: scale(0.5)} 
90% { -webkit-transform: scale(1)} 
} 
@-webkit-keyframes fadeOut { /*通用淡出*/ 
0% {opacity: 0; }
100% {opacity: 1; }
}
</style> 
</head> 
<body> 
<div id="div" class="fade"></div> 
<script type="text/javascript"> 
var tt = document.querySelector('#div'); 

tt.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件 
    this.className = 'change'; 
    console.log(2); 
}, false); 
</script> 
</body> 
</html>