css3动画学习

css3动画的几个关键属性： 1.@keyframes关键帧，语法是@keyframes animationname {keyframes-selector {css-styles;}} @keyframes后面接动画名称，{}里面可以用百分号指定动画的不同阶段的css属性，也可以使用from、to代表开始（0%）和结束（100%）。 2.animation-name动画名，指定关键帧的名称，和@keyframes后面的名称必须一致。 3.animation-duration动画时长。语法是animation-duration: time;time的单位可以是秒（s）和毫秒（ms）； 4.animation-timing-function过渡效果。语法是animation-timing-function: value;value有5个可选值，默认是ease（慢-快-慢的过渡），其他的4个分别是linear(匀速）、ease-out(由快逐渐变慢）、ease-in(由慢逐渐变快）、ease-in-out（满-快-慢的过渡，和ease相比，ease慢的时候更慢，快的时候更快）。另外值得一提的是，还可以通过cubic-bezier(n,n,n,n)（三阶贝赛尔曲线）来自己定制运动方式。 5.animation-delay动画延迟。语法是animation-delay: time;time的单位和动画时长一样，默认为0.但值得一提的是，delay可以为负数，表示提前多少秒，相当于定时跳跃。 6.animation-iteration-count重复次数。语法是animation-iteration-count: value;value可以是一个确切的数字，表示重复多少次，默认是1次；还可以是infinite，表示无限循环下去。 7.animation-direction播放方向。语法是animation-direction: value;value有两个值可选，默认是normal，单方向进行一次。另一个值是alternate，表示单向过去再反向回来。 8.animation-play-state动画状态。语法是animation-play-state: paused|running;只有两个状态可选，暂停和播放。 合在一起时写的顺序为：animation: name duration timing-function delay iteration-count direction; 注意：当前浏览器都不支持这些属性，IE完全不支持，其他高级浏览器可以添加前缀使之支持。 这些属性已经相当的强大了，通过css3可以做出许多令人难以置信的效果，限制你的只有想象力，google搜一下你就可以找到一大堆国外大牛做的超炫动画了，或者去codepen.io广场上去溜达溜达。 一个基础的demo：

  现在也出现了一些css3动画制作工具，比如收费的sencha和adobe的edge，另外国内也出了一款开源免费的在线动画制作工具——ianimator，详细介绍请移步至神飞前辈博客。