常用特效/变换（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>如何写出高性能的CSS3动画
小伙伴们在写CSS3动画时，会发现在手机上很多时候会感到卡顿，然后Google到的解决方案大多是开启GPU加速transform: translate3d(0,0,0); 可解决，但是为什么开启GPU加速就能让动画顺滑呢?
css3动画讲解，关于css3的@keyframes和animation
通过css3我们可以创建动画，它能取代gif图片、Flash、Js动画等,css3的animation动画是应用在html的DOM元素上的，通过样式来实现的。
css3动画transition的使用和介绍
CSS3中可以使用transition来做最简单动画效果，transition表示到一个元素的属性值发生变化时，我们可以看到页面元素从旧的属性慢慢变化为新的属性值的过程，这种效果不是立即变化的，而是体现出一种动画过程。
CSS3动画 相比JS Animation 哪个更快?
基于JavaScript的动画竟然已经默默地比CSS的transition动画快了？而且，Adobe和 Google竟然一直在发布可以媲美原生应用的富媒体移动站点？这篇文章将会逐点讲解基于JavaScript的DOM动画库，比如Velocity.js和GSAP，是如何比jQuery和基于CSS的动画库高效的。
css制作简单loading动画效果【css3 loading加载动画】
loading的制作需要一些比较高深的web动画技术，后来发现大多数loading都可以用“障眼法”做出来。比如一个旋转的圆圈，并不都是将gif图放进去，有些就是画个静止图像，然后让它旋转就完了。gif图也可以，但是加载时间比较长。CSS的animation可以做出大多数的loading
不定高度的元素实现transition动画_如何为height:auto的div添加css3过渡动画
一个元素不设置高度时，height的默认值是 auto，浏览器会自动计算出实际的高度。那么如何为一个height:auto的元素添加 CSS3动画呢？可以通过JS 获取精确的 height 值，或者使用max-height 代替 height。
css3动画的性能优化_针对移动端卡顿问题
主要讲的是怎样制作流畅动画，特别是针对移动端。在这里我首先介绍制作动画的几种方法的优缺点；接着会着重介绍用css3制作动画的注意事项，包括：用canvas、css3、jquery制作动画；css3在移动端卡顿问题；动画过程有闪烁问题（一般出现在动画开始）
CSS3动画transform、transition和animation的区别
CSS3属性中关于制作动画的三个属性：Transform,Transition,Animation。transform：描述了元素的静态样式，本身不会呈现动画效果,transition样式过渡，从一种效果逐渐改变为另一种效果，animation动画 由@keyframes来描述每一帧的样式
css3动画，监控动画执行完毕
CSS3之前，在网页上要做动画，一般使用javascript来实现，用timer定时执行一些操作来实现动画效果。自有了CSS3之后，在网页上做动画变得更简单了。相对于使用javascript的实现方式，用CSS3实现的动画效果更流畅，实现起来也更简单。
值得你收藏的10个CSS3动画工具
在CSS3中引入了全新的动画语法，它能够帮助你在设计中实现许多有趣的事情。通常构建炫酷的动画是非常复杂和费时的，而使用动画库和生成器则可以帮助你完美处理这一切
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!