服务热线:13814106501

Transition 返回

/***  Transition  ***/

transition有四个属性,分别是:transition-property;transition-duration;transition-timing-function;transition-delay每个属性都是独立的。

transition-property:检索或设置对象中的参与过渡的属性

transition-duration:检索或设置对象过渡的持续时间

transition-timing-function:检索或设置对象过渡的动画类型

此属性有6个可能的值:ease(逐渐变慢);linear(匀速);ease-in(加速);ease-out(减速);ease-in-out(加速然后减速);cubic-bezier(允许自定义时间曲线)。

transition-delay:检索或设置对象延迟过渡的时间。


兼容写法:

//Mozilla 内核

-moz-transition:all 0.5s ease-in 1s;

// Webkit 内核

-webkit-transition:all 0.5s ease-in 1s;

// Opera 内核

-o-transition:all 0.5s ease-in 1s;

// W3C标准

transition:all 0.5s ease-in 1s;


使用transition功能同时平滑过渡多个属性值

例子:

div{
            background-color:#ffff00;color:#000;width:300px;
            -webkit-transition:background-color 1s linear,color 1s linear,width 1s linear;
            -o-transition:background-color 1s linear,color 1s linear,width 1s linear;
            -moz-transition:background-color 1s linear,color 1s linear,width 1s linear;
 }
 div:hover{background-color:#003366;color:#fff;width:400px;}

<div>示例文字</div>

在1秒内,将元素的背景,字体,宽度进行平滑过渡。


注:谷歌内核的浏览器,在写transition时候,写的手法是和其它内核不一样。

-webkit-transition:all ease 4s;

-moz-transition:transform 4s ease 0s;

-o-transition:transform 4s ease 0s;

transition:transform 4s ease 0s;





×
确定 取消
×
登录●注册
个人中心
登录
注册
重设密码
×

用户登录

×

用户注册

请用微信扫描,将为您自动生成账号 →
欢迎咨询 您本次的消息将以邮件方式发送给我们