transition过渡属性是指,当css样式属性发生变化的时候,中间有一个变化的过程,该属性就是为了描述这个过程在呢么变化的。
例子:
- #div1{
- width: 200px;
- height: 200px;
- background-color: blue;
- /* transition css3属性,表示的是过渡 ,表示一个元素的样式,变成另外一个样式,有动画的过程,必须写在原来属性中,ease表示不是匀速的。默认是匀速的,延迟0s开始*/
- transition: all 2s ease 0s;
- }
- #div1:hover{
- background-color: green;
- width: 0px;
- height: 0px;
- /* border-radius: 50%;
- box-shadow: 2px 2px 2px black; */
- /*transform:旋转属性(度数)
- translateX:移动属性*/
- }
#div1{
width: 200px;
height: 200px;
background-color: blue;
/* transition css3属性,表示的是过渡 ,表示一个元素的样式,变成另外一个样式,有动画的过程,必须写在原来属性中,ease表示不是匀速的。默认是匀速的,延迟0s开始*/
transition: all 2s ease 0s;
}
#div1:hover{
background-color: green;
width: 0px;
height: 0px;
/* border-radius: 50%;
box-shadow: 2px 2px 2px black; */
/*transform:旋转属性(度数)
translateX:移动属性*/
}
如上例所示,就可以看到css样式变化的过程,而transition这个属性就描述了,相应的例子中也写了它相关的几个条件,分别是CSS属性的名称,过渡时间,过渡方式,延迟时间。
下表列出了所有的过渡属性:
属性 | 描述 | CSS |
---|---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。transition-property:width | 3 |
transition-duration | 定义过渡效果花费的时间。默认是 0。transition-duration: 2s; | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。transition-timing-function:linear; | 3 |
transition-delay | 规定过渡效果何时开始。默认是 0。transition-delay: 2s; | 3 |
下面的两个例子设置所有过渡属性:
![Opera Opera](https://i-blog.csdnimg.cn/blog_migrate/4d0a7cddd5a4535af521bd1eaf2579ea.gif)
![Safari Safari](https://i-blog.csdnimg.cn/blog_migrate/25e2d1c6c9547d48eb9d1558a7db2175.gif)
![Chrome Chrome](https://i-blog.csdnimg.cn/blog_migrate/fca46c003bf1d224d162efd747b370cd.gif)
![Firefox Firefox](https://i-blog.csdnimg.cn/blog_migrate/eb33d2c4693938a6dc07a47f11e5533c.gif)
![Internet Explorer Internet Explorer](https://i-blog.csdnimg.cn/blog_migrate/6fd4d3e0df956019ca1eea8b176136e8.gif)
实例
在一个例子中使用所有过渡属性:
div
{
transition-property:
width
;
transition-duration:
1
s
;
transition-timing-function:
linear
;
transition-delay:
2
s
;
/*
Safari
*/
-
webkit-transition-property:
width
; -
webkit-transition-duration:
1
s
; -
webkit-transition-timing-function:
linear
; -
webkit-transition-delay:
2
s
;
}