css过渡

过渡介绍：CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。用鼠标移过下面的元素：

 过渡的四个必需要素注意

1. transition: css名称

2.all 过渡时间(必须参数)

3.运动曲线

4.开始时间

transition: css名称 又分为四大类

将鼠标悬停在一个 div 元素上，逐步改变表格的宽度从 100px 到 300px：

div { width:100px; transition: width 2s; -webkit-transition: width 2s; } div:hover {width:300px;}

transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。
transition-delay	规定过渡效果何时开始。默认是 0。

将鼠标悬停在一个div元素上，逐步改变表格的宽度：

div
{
transition-property:width;
-moz-transition-property: width; /* Firefox 4 */
-webkit-transition-property:width; /* Safari and Chrome */
-o-transition-property:width; /* Opera */
}

div:hover {width:300px;}

 

最后5秒出现切换效果：

transition-duration: 5s;
-webkit-transition-duration: 5s;

过渡效果以同样的速度从开始到结束：

transition-timing-function: linear;
-webkit-transition-timing-function: linear; 

等待2秒前切换效果开始：

transition-delay: 2s;
-webkit-transition-delay: 2s;

运动曲线

linear 重头到尾速度都是一样的

ease 默认 低速开始逐渐增大，结束前速度降低

ease-in 以低速开始

ease-out以低速结束

ease-in-out以低速开始和结束

normal正常播放

reverse 动画反向播放

        transform: rotate3d(x, y, z, deg) -- 沿着自定义轴旋转 deg 为角度
        - x, y, z 表示旋转轴的矢量，是标识你是否希望沿着该轴进行旋转，最后一个标识旋转的角度
          - transform: rotate3d(1, 1, 0, 180deg) -- 沿着对角线旋转 45deg
          - transform: rotate3d(1, 0, 0, 180deg) -- 沿着 x 轴旋转 45deg 

以上就是我对过渡的看法