2.7 KiB
2.7 KiB
title | localeTitle |
---|---|
CSS3 Transitions | CSS3过渡 |
CSS3过渡
如果您希望您的应用或网页更具动态性和美观,则使用CSS3 过渡非常有用。
实际上,转换允许您以平滑的方式更改属性( width
, color
,...)值。
transition
属性是transition-property
, transition-duration
, transition-timing-function
, transition-delay
的简写属性,语法如下:
transition: transition-property transition-duration transition-timing-function transition-delay
例如 :
transition: width 2s ease-in-out 1s;
属性描述
transition-property
指定应应用转换的属性的名称 :
background-color
color
width
height
margin
border-radius
- 等等 !
例如 :
transition-property: width; /* means the transition applies on the width */
transition-duration
指定转换应采用 的秒数或毫秒数 :
例如 :
transition-duration: 2s /* means the transition effect last 2s */
transition-timing-function
指定过渡效果的速度曲线 。因此,您可以在其持续时间内更改转换的速度 。
以下是最常用的值:
linear
ease
ease-in
ease-out
ease-in-out
cubic-bezier(n, n, n, n)
例如 :
transition-timing-function: linear
注意:上面的所有值实际上都是特定的cubic-bezier
。例如, linear
相当于cubic-bezier(0.25,0.1,0.25,1)
您可以在这里试验并了解有关_Cubic Bezier的_更多信息
transition-delay
转换开始时以秒或毫秒指定。
例如 :
transition-delay: 1s /* means wait 1s before the transition effect start */
如何使用过渡?
您可以通过两种方式编写转换:
使用速记属性( transition
)
div {
width: 200px;
transition: all 1s ease-in-out;
}
div:hover {
width: 300px;
}
为所有过渡属性赋予值
div {
width: 200px;
transition-property: width;
transition-duration: 1s;
transition-timing-function: ease-in-out;
}
注意:两个例子都是等价的
例子
以下是一些包含简单过渡的简单笔: