CSS3中使用animation属性，可以不适用JavaScript而制作动画，运用的好，可以做到很多漂亮的效果，最近有空，来摸索一下animation的使用，做几个demo玩玩
animation属性的介绍
animation属性能够改变元素的位置和各种css属性
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name 需要绑定到选择器的keyframe的名称（由@keyframe自定义在下边）
- animation-duration 规定完成动画花费的时间，以s或者ms为单位（速度）
- animation-timing-function 规定动画的速度曲线（linear|ease|ease-in|ease-out|ease-in-out|还有其他曲线）
- animation-delay 规定动画开始之前的延迟（s为单位，可以是负值，负值时表示一开始跳过前边的2s动画，即直接从动画第2秒的地方开始）
- animation-iteration-count 规定动画应该播放的次数（默认1，可填数字次数，还有infinite无限次）
- animation-direction 规定是否应该轮流反向播放动画（默认normal，还有alternate表示可以正反往复播放）
创建动画
上边的animation-name属性，需要填写一个自定义的动画名称，这就需要我们创建动画。在css3中，使用@keyframes规则来创建动画。但是这里要特别注意，目前的浏览器都不支持@keyframes，所以在使用的时候，要写成下边的形式：
- @keyframes+name
- @-moz-keyframes+name ———Firefox
- @-o-keyframes+name ————-Opera
- @-webkit-keyframes+name ——Safari 和 Chrome
定义和用法
- 通过 @keyframes 规则，您能够创建动画。
- 创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
- 以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0%和 100%。
- 0% 是动画的开始时间，100% 动画的结束时间。
- 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
注释：请使用动画属性来控制动画的外观，同时将动画与选择器绑定。
例如：
//这里我只写了一个，实际上要注意不同的浏览器支持不同，同一个mymove要用不同的keyframes格式定义多次
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}———————————————————–我是分割线————————————————————-
transition属性的介绍
transition属性用于平滑过渡，在hover或者click的时候，改变各种css属性时，实现平滑过渡，而不是瞬间改变
transition 属性是一个简写属性，用于设置四个过渡属性：
- transition-property 要过渡的css属性名（还可以是none，即都不；和all，即全部属性都过渡）
- transition-duration 完成过渡所需的时间，s或者ms
- transition-timing-function 过渡效果的速度曲线（linear|ease|ease-in|ease-out|ease-in-out|还有其他曲线）
- transition-delay 过渡开始之前的延迟
但是这里要特别注意，为了满足不同浏览器的支持，要写成下边的形式：
div
{
width:100px;
height:100px;
background:blue;
//改变宽度 在2s内改变 线性改变 延迟1s后改变
transition:width 2s linear 1s;
-moz-transition:width 2s linear 1s; /* Firefox 4 */
-webkit-transition:width 2s linear 1s; /* Safari and Chrome */
-o-transition:width 2s linear 1s; /* Opera */
}
div:hover
{
width:300px;
}———————————————————–我是分割线————————————————————-
transform属性的介绍
transform属性指变换，包括拉伸，压缩，旋转，偏移等等。
transform分为2D转换和3D转换，下边分别来说。
transform的2D转换：
- translate(left(px),top(px)) 偏移：通过两个参数改变位置
- rotate(顺时针旋转角度(deg)) 旋转：角度可以是负值，此时表示逆时针旋转
- scale(x轴方向缩放，y轴方向缩放) 缩放：缩放倍数，1为不变，0.5为缩到一半，2为两倍
- skew(沿x轴水平翻转角度(deg) 翻转：沿y轴垂直翻转角度(deg)) 注意旋转跟翻转的区别
- matrix() 该方法把所有的2D转换方法放在一起，这里涉及矩阵转换，下边只写个简单的结论：
1.matrix()做偏移
matrix（n，n，n，n，水平偏移距离(即translate-left)，垂直偏移距离（即translate-top））
2.matrix()做旋转
matrix（cosθ , sinθ , -sinθ , cosθ , n , n ）
对旋转来说rotate(θdeg)方式就简单很多。
3.其他详情见大神的这篇博客，讲的很详细。
但是这里要特别注意，为了满足不同浏览器的支持，要写成下边的形式：
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
-o-transform: skew(30deg,20deg); /* Opera */
-moz-transform: skew(30deg,20deg); /* Firefox */
}transform的3D转换：
- rotateX(旋转角度(deg)) 沿水平方向旋转（中水平线）
- rotateY(旋转角度(deg)) 沿垂直方向旋转（中垂线）