大话CSS之动画简述

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。动画属性可以逐渐地从一个值变化到另一个值，比如尺寸大小、数量、百分比和颜色。CSS3 中有三个关于动画的样式属性transform、transition和animation；

CSS3动画是什么？

动画是使元素从一种样式逐渐变化为另一种样式的效果。
可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

CSS3 可以创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。

比如这个小示例：当动画为 25% 及 50% 时改变背景色，然后当动画 100% 完成时再次改变

@keyframes myfirst
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
}

样式属性

transform

transform可以用来设置元素的形状改变，主要有以下几种变形：rotate（旋转）、scale（缩放）、skew（扭曲）、translate（移动）和matrix（矩阵变形），语法如下：

.transform-class {
    transform ： none | <transform-function> [ <transform-function> ]*
}

none表示不做变换；<transform-function>表示一个或多个变化函数，变化函数由函数名和参数组成，参数包含在()里面，用空格分开，例如：

.transform-class {
    transform ： rotate(30deg) scale(2,3);
}

transform-origin 基点

所有的变形都是基于基点，基点默认为元素的中心点。用法：transform-origin: (x, y)，其中 x 和 y 的值可以是百分比、rem 或者是 px 等等，也可以用表示位置的单词来表示例如：x 可以用left、center、right；y 可以用top、center、bottom。

.transform-class {
    transform-origin: (left, bottom);
}

rotate 旋转

用法：rotate(<angle>)；表示通过指定的角度对元素进行旋转变形，如果是正数则顺时针旋转，如果是负数则逆时针旋转，例如：

.transform-rotate {
    transform: rotate(30deg);
}

scale 缩放

它有三种用法：scale(<number>[, <number>])、scaleX(<number>)和scaleY(<number>)；分别代表水平和垂直方向同时缩放、水平方向的缩放以及垂直方向的缩放，入参代表水平或者垂直方向的缩放比例。缩放比例如果大于1则放大，反之则缩小，如果等于1代表原始大小。

.transform-scale {
    transform: scale(2,1.5);
}

.transform-scaleX {
    transform: scaleX(2);
}

.transform-scaleY {
    transform: scaleY(1.5);
}

translate 移动

移动也分三种情况：translate(<translation-value>[, <translation-value>])、translateX(<translation-value>)和translateY(<translation-value>)；分别代表水平和垂直的移动、水平方向的移动以及垂直方向同时移动，移动单位是 CSS 中的长度单位：px、rem等;

.transform-translate {
    transform: translate(400px, 20px);
}

.transform-translateX {
    transform: translateX(300px);
}

.transform-translateY {
    transform: translateY(20px);
}

skew 扭曲

扭曲同样也有三种情况，skew(<angle>[, <angle>])、skewX(<angle>)和skewY(<angle>)；同样也是水平和垂直方向同时扭曲、水平方向的扭曲以及垂直方向的扭曲，单位为角度。

.transform-skew {
    transform: skew(30deg, 10deg);
}

.transform-skewX {
    transform: skewX(30deg);
}

.transform-skewY {
    transform: skewY(10deg);
}

transition

transition是用来设置样式的属性值是如何从从一种状态变平滑过渡到另外一种状态，它有四个属性：

transition-property（变换的属性，即那种形式的变换：大小、位置、扭曲等）；
transition-duration（变换延续的时间）；
transition-timing-function（变换的速率）
transition-delay（变换的延时）

它也是transition-property、transition-duration、transition-timing-function、transition-delay的简写：

.transition {
    transition ：<property> <duration> <timing function> <delay>;
}

animation

animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的。

@keyframes

@keyframes animationName {
    from {
        properties: value;
    }
    percentage {
        properties: value;
    }
    to {
        properties: value;
    }
}
//or
@keyframes animationName {
    0% {
        properties: value;
    }
    percentage {
        properties: value;
    }
    100% {
        properties: value;
    }
}

animationName：动画名称，开发人员自己命名；
percentage：为百分比值，可以添加多个百分比值；
properties：样式属性名称，例如：color、left、width等等。

注意事项：

animation-play-state 也是 animation 的简写属性，但在 -webkit- 中不适用：

animation: myfirst 5s infinite linear paused;

即：

animation-name: myfirst;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-play-state: paused;

但, 在 -webkit- 中，-webkit-animation-play-state 却是单独的，不能用 -webkit-animation 包含：

-webkit-animation: myfirst 5s infinite linear paused;

无效！！！！！

必须写为：

-webkit-animation: myfirst 5s infinite linear;
-webkit-animation-play-state: paused;

---------------------------------------

注意（2）：

animation 并不太注重语法顺序（除了【duration / 动画用时】一定在【delay / 动画延时】之前），但在 -webkit-animation （主要针对 "Safari"）中，不能以 -webkit-animation-name 来结尾：

animation: myfirst 5s linear 2s infinite alternate;
animation: 5s linear 2s infinite myfirst alternate;
animation: 5s 2s infinite alternate linear myfirst;
// etc... 都是可以的

但在 Safari 中, 以下语句无法运行：【动画名结尾】

-webkit-animation: 5s linear 2s infinite alternate myfirst;

【动画名称】不能作为结尾属性, 以下语句可运行：

-webkit-animation: myfirst 5s linear 2s infinite alternate;
-webkit-animation: 5s linear 2s infinite myfirst alternate;
-webkit-animation: 5s 2s infinite myfirst alternate linear;

总结

这三个属性的介绍已经如上所示，我们可以将transform我理解为元素的几何变形，它是有规律可寻的，这种变形并不会产生动画效果仅仅是原有形状的改变；transition和animation它们很像 flash 中的补间动画和逐帧动画；transition是从一个状态变化到另外一种状态，当变化有了平滑的效果后就产生了动画，它是一个公式化的变化，在比较规则的动画效果中我们可以使用，例如：旋转的风车、行驶的汽车、颜色的渐变等等；animation的动画效果更加灵活，可以实现像影片一样的复杂无规则的动画。

（完）