过渡介绍: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
以上就是我对过渡的看法