css3动画——transition（过渡）

用于规定元素不同状态间变化所需时间，属性值为一个时间值，单位（s/ms）； 初次接触此属性觉得有些麻烦，通过一段时间的学习，还是简单做下过度知识的整理。

相关属性

1.transition：属性简写，用于在单个属性中 同时可进行四个属性值的设定。

div
{
    width:100px;
    height:100px;
    background:yellow;
    transition:width 2s linear 2s, height 2s linear 2s;
}

div:hover
{
    width:200px;
    height:200px;
}

• 以上代码运用了过渡简写属性，其中transition属性 规定了过度对象，过渡时间，过渡的时间曲线，过度的延迟。

2.transition-property：用于规定过渡效果所应用的对象。

3.transition-duration：用于规定过度效果所需时间。

4.transition-timing-functon：用于规定过渡效果时间曲线。

5.transition-delay：用于规定过度满足条件与开始过度间的延迟。

div
{
    transition-property: width;
    transition-duration: 1s;
    transition-timing-function: linear;
    transition-delay: 200ms;
}
div:hover
{
    width:200px;
    height:200px;
}

• 以上第一行声明指定过度对象为元素宽度（width）。
• 第二行声明指定过渡所需时间（1s）。
• 第三行声明规定过度的时间曲线（linear）。
• 第四行声明规定过渡延迟时间（2s）。
• 注：以上方法改变了盒子尺寸，会对周围布局造成一定的影响，为了达到动画的视觉效果，又不影响布局，就需要用到css3 2D/3D转换。

css3 2D/3D转换——transform

• css2D/3D转换又经常被称作css动画
• 2D/3D转换不会因对周围布局造成任何影响。

相关属性值

• rotate（理解为旋转）
• translate（理解为移动）
• skew（理解为倾斜）
• scale（理解为缩放）
• majtrix（将以上属性值简写在一起）
• 以上使用较多（常见）在元素的点击/悬停效果

1.rotate（旋转）

鼠标悬停时旋转实现方法：

div{
width：100px；
height：100px；
transition-duration：2s；
transition-delay：2s；

}
div:hover{
transform:rotatez(45deg)    
transform:rotatex(45deg)
transform:rotatey(45deg)
}

• 以上代码第一段规定了元素所有属性变化过渡时间为2s，延迟为2s。
• 第二段规定了元素被悬停时transform属性为rotatey（45deg）（以y轴顺时针旋转45度），rotate取值若果是负数，旋转方向为逆时针。（3D动态效果）
• rotatex（45deg），规定元素以x轴顺时针旋转45度。（3D动态效果）
• rotatez（45deg），规定元素以z轴顺时针旋转45度。（2D动态效果）
• 实现了元素在鼠标悬停时2s后，以y轴顺时针旋转45度，选转过程2s。

2.translate（移动）

鼠标悬停移动实现代码：

div{
width：100px；
height：100px；
transition-duration：300ms；
}
div：hover
{
transform：translate（50px，50px）
}

• 代码第一段规定元素属性变化过程的过渡时间为3s。
• 代码第二段规定元素背悬停时，元素项x轴正方向移动50px，向y轴正方向移动50px，当transform取值为负数时，移动方向则为负方向。
• 以上就能实现规定元素背悬停时移动的量。

3.scale（缩放）

鼠标悬停时缩放实现代码：

div{
width：100px；
height：100px；
transition：2s；
}
div：hover
{
transform：scale（0.4，2）；
}

• 代码第一段依然是规定元素变化过渡时间2s。
• 第二段规定元素x轴方向尺寸缩放比列为0.4倍（缩小），y轴方向尺寸缩放比例为2倍（放大）。
• 以上代码实现元素背悬停时使用2s时间进行规定尺寸的缩放。

4.skew（倾斜）

常用于改变元素盒子形状 实现代码：

div{
width:100px;
height:100px;
transform:slew(20deg,40deg);        
}

• 以上规定元素以元素y轴中线逆时针倾斜20度，以x轴中线逆时针倾斜40度。

利用以上的属性，就可以实现一些简单的页面动画，时我们的页面更具有观赏性，代码更简洁。