CSS transition 的默认值


语法

transition: property duration timing-function delay|initial|inherit;

示例:

div {
  width100px;
  height100px;
  transition: width 2s;
}

div:hover {
  width300px;
}

transition mov

CSS transition 演示

同时指定多个属性

也可同时指定多个需要 transition 的属性,每个属性用逗号分隔,包含自己完整的时间,动画方法(timing function)的指定。

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

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

transition_multi_props mov

CSS transition 同时作用于多个属性

上面 width 只指定了属性,未指定时间及动画方法,所以动作的变化发是在瞬时完成的。

默认值

transition: all 0s ease 0s

意味着浏览器对所有元素所有属性设置了 transitoin 但时长为 0。

所以实际使用中,只需要设置元素的 transition-duration 即可让 transition 生效。

div {
  width: 100px;
  height: 100px;
-  transition: width,height 2s;
+  transition-duration: 2s;
}

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

defualt mov

CSS transition 的默认值

相关资料


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM