CSS3 动画

变形 transform

在CSS3中，动画效果包括3个部分：变形（transform）、过渡（transition）、动画（animation）

translate()平移

transform: translateX(x);　　　 /*沿x轴方向平移*/
transform: translateY(y);　　　 /*沿y轴方向平移*/
transform: translate(x, y);　　 /*沿x轴和y轴同时平移*/

scale()缩放

transform: scaleX(x);　　　 /*沿x轴方向缩放*/
transform: scaleY(y);　　　 /*沿y轴方向缩放*/
transform: scale(x, y);　　 /*沿x轴和y轴同时缩放*/

当x或y取值为0~1时，元素进行缩小；当x或y取值大于1时，元素进行放大。

skew() 倾斜

倾斜也有3种情况：skewX()、skewY()、skew()。

参数x表示元素在x轴方向的倾斜度数，单位为deg（即degree的缩写）。如果度数为正，则表示元素沿x轴方向逆时针倾斜；如果度数为负，则表示元素沿x轴方向顺时针倾斜。
参数y表示元素在y轴方向的倾斜度数，单位为deg。如果度数为正，则表示元素沿y轴方向顺时针倾斜；如果度数为负，则表示元素沿y轴方向逆时针倾斜。

rotate()旋转

transform: rotate(angle);

参数angle表示元素相对于中心原点旋转的度数，单位为deg。如果度数为正，则表示顺时针旋转；如果度数为负，则表示逆时针旋转。
 

transform-origin改变中心原点

在CSS3变形中，任何元素都有一个中心原点。默认情况下，元素的中心原点位于x轴和y轴的50%处。
CSS3的各种变形（平移、缩放、倾斜等）都是以元素的中心原点进行变形的。

我们可以使用transform-origin属性来改变元素的中心原点。

transform-origin属性取值有两种：一种是“长度值”，另一种是“关键字”。当取值为长度值时，单位可以为px、em和百分比等。当取值为关键字时，transform-origin属性取值跟background-position属性取值是相似的。

过渡 transition 

我们可以使用transition属性将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”，从而实现动画效果。
CSS变形（transform）呈现的仅仅是一个“结果”，而CSS过渡（transition）呈现的是一个“过程”。
transition: 过渡属性 过渡时间 过渡方式 延迟时间;

 凡是涉及CSS3过渡，我们都是结合:hover伪类来实现过渡效果的。
我们可以使用transition-timing-function属性来定义过渡方式。所谓“过渡方式”，指的是动画在过渡时间内的速率变化方式。

 

transition-property:border-radius,background-color;
transition-duration:1s;
transition-timing-function:linear;
transition-delay: 0s;

上面这段代码可以等价于：

transition:all 1s linear 0s;

当transition-property属性定义为all时，CSS3会自动判断哪些属性是作为过渡效果的属性，相对来说更加简单方便。
由于transition-delay属性是一个可选属性，因此当transition-delay取值为0s时，这个参数可以省略。

transition:all 1s linear;

动画 animation

▶ 对于transition属性来说，它只能将元素的某一个属性从一个属性值过渡到另一个属性值。
▶ 对于animation属性来说，它可以将元素的某一个属性从第1个属性值过渡到第2个属性值，然后还可以继续过渡到第3个属性值，以此类推。

nimation:动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向;

*定义动画*/
@keyframes mycolor
{
  0%{background-color:red;}
  30%{background-color:blue;}
  60%{background-color:yellow;}
  100%{background-color:green;}
}
/*调用动画*/
div:hover
{
   animation:mycolor 5s linear;
}

在调用动画之前，我们必须先使用@keyframes规则来定义动画。
在使用@keyframes规则时，如果仅仅只有0%和100%这两个百分比，此时0%和100%可以使用关键字from和to来代替，其中0%对应from，100%对应to。

我们可以使用animation-duration属性来定义动画的持续时间。
animation-duration属性取值是一个时间，单位为秒（s），可以是小数。

我们可以使用animation-timing-function属性来定义动画的动画方式。所谓“动画方式”，指的是动画在过渡时间内的速率变化方式。
animation-timing-function属性取值共有5种，这跟CSS3过渡的transition-timing-function是一样的。

我们可以使用animation-iteration-count属性来定义动画的播放次数。
animation-iteration-count属性取值有两种：一种是“正整数”，另一种是“infinite”。当取值为n（正整数）时，表示动画播放n次；当取值为infinite时，表示动画播放无数次，也就是循环播放。

我们可以使用animation-direction属性来定义动画的播放方向。

/*第1个i元素*/
#box>i:nth-child(1)
{
   left: 0;
   animation: loading 1s ease-in 0.1s infinite;
}