CSS3中的动画，animation、transition和transform属性的运用

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)) 沿垂直方向旋转（中垂线）