首页 > 代码库 > CSS3 过渡

CSS3 过渡

2024-09-22 16:55:42   216人阅读

CSS3中，我们为了添加某种效果可以从一种样式转变到另一个的时候，无需使用Flash动画或JavaScript。
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点，必须规定两项内容：

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。

 

实例：元素形变的过渡

div{    width: 100px;    height: 100px;    background: red;    transition: width 1s;    -webkit-transition: 1s;}div:hover{    width: 300px;}

按照教程所说，transition必须指定被修改的属性。但是我没加width属性效果也是一样的。

另外，transition中的时间不能设定为毫秒数，否则没有过渡效果。

 

 

实例：多项属性的过渡

div{    width: 100px;    height: 100px;    background: red;    transition: width 1s, height 1s, transform 1s;    -webkit-transition: width 1s, height 1s, -webkit-transform 1s;}div:hover{    width: 200px;    height: 200px;    transform: rotate(180deg);    -webkit-transform: rotate(180deg);}

 

 

transition 属性

语法

transition: property duration timing-function delay;

技术分享

 

类似@keyframes属性，transition属性也可以拆分开来

技术分享

 

 

参考：CSS3 过渡

CSS3 过渡


联系
我们