CSS3动画总结
常用特效/变换（transform）
- scale（2D缩放）
- rotate（2D旋转）
- translate（2D位移）
- skew（2D倾斜）
keyframes
这个属性用来定义一系列关键帧。也就是在动画运行的全过程中的一个个中间点。@keyframes zoomIn {
0%{ transform: scale(0);}
60%{ transform: scale(1.1);}
100% { transform: scale(1);}
}
@-moz-keyframes zoomIn {
0%{ transform: scale(0);}
60% { transform: scale(1.1);}
100% { transform: scale(1);}
}
@-webkit-keyframes zoomIn {
0%{ -webkit-transform: scale(0);}
60% { -webkit-transform: scale(1.1);}
100% { -webkit-transform: scale(1);}
}
@-o-keyframes zoomIn {
0%{ -o-transform: scale(0);}
90% { -o-transform: scale(1.1);}
100% { -o-transform: scale(1);}
}
@-ms-keyframes zoomIn{
0%{ -ms-transform: scale(0);}
60% { -ms-transform: scale(1.1);}
100% { -ms-transform: scale(1);}
}animation的属性
nimation-fill-mode 填充模式
该属性有四个值
none：默认值。不设置对象动画之外的状态
forwards：设置对象状态为动画结束时的状态（触发之前）
backwards：设置对象状态为动画开始时的状态（触发之后）
both：设置对象状态为动画结束或开始的状态（）
注意 这个东西只能在animation之后添加
事件
在动画的世界里，总有这样的需求，就是某个动画结束了之后才进行下一个动画，这个时候就要知道上一个动画是什么时候结束的了。虽然可以用setTimeout来计时达到差不多的效果，但是总感觉不够精确。 还好，css3的动画有js事件。
开始：animationstart
迭代：animationiteration
结束：animationend
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>delay</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
@-webkit-keyframes delay{
100%{
-webkit-transform:translate(100px,0);
}
}
.delay{
width:100px;height:100px;
background-color: #000;
-webkit-animation:delay 1s linear 2 both alternate;
}
</style>
</head>
<body>
<div class="delay"></div>
<script type="text/javascript">
window.onload = function(){
var delay = document.getElementsByClassName('delay')[0],
time1,
time2;
delay.addEventListener('webkitAnimationStart',function(){
time1 = new Date().getTime();
time2 = time1;
console.log(time2-time1+'ms')
})
delay.addEventListener('webkitAnimationIteration',function(){
time2 = new Date().getTime();
console.log(time2-time1+'ms')
})
delay.addEventListener('webkitAnimationEnd',function(){
time2 = new Date().getTime();
console.log(time2-time1+'ms')
})
}
</script>
</body>
</html>本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
