CSS Transition

CSS Transition

Ang CSS transisyon ay nagbibigay-daan sa iyo na magbago nang mahinahon ang halaga ng attribute sa ilang panahon.

Ilipat ang mouse sa elementong ito para makita ang epekto ng CSS transisyon:

CSS

Sa kabanata na ito, matututunan mo ang sumusunod na mga katangian:

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

Browser support para sa transisyon

Ang numero sa talahanayan ay nagtutukoy sa unang bersyon ng browser na ganap na sumusuporta sa katangian na ito.

属性 Chrome IE Firefox Safari Opera
transition 26.0 10.0 16.0 6.1 12.1
transition-delay 26.0 10.0 16.0 6.1 12.1
transition-duration 26.0 10.0 16.0 6.1 12.1
transition-property 26.0 10.0 16.0 6.1 12.1
transition-timing-function 26.0 10.0 16.0 6.1 12.1

Paano gamitin ang CSS transisyon?

Upang gumawa ng transisyon effect, dapat mong alamin ang dalawang bagay:

  • CSS attribute na gusto mong idagdag na epekto
  • Durasyon ng epekto

Pansin:Kung hindi tinukoy ang bahaging panahon, ang transisyon ay hindi magiging epektibo dahil ang default ay 0.

Ang halimbawa na ito ay nagpakita ng pulang <div> element na may sukat na 100px * 100px. Ang <div> element ay nagbigay din ng transisyon effect para sa attribute ng width, na may takbo na 2 segundo:

实例

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

Kapag nagbabago ang halaga ng tinukoy na CSS attribute (width), magsisimula ang transisyon effect.

Ngayon, sabihin natin ng bagong halaga para sa attribute ng width kapag ang mouse ay nasa <div> element.

实例

div:hover {
  width: 300px;
}

亲自试一试

Puwede mong pagsalita, kapag ang kursor ay lumilipas sa elementong ito, ito ay mawawala nang lilipas ang orihinal na estilo.

改变若干属性值

下面的例子为 width 和 height 属性都添加了过渡效果，width 是 2 秒，height 是 4 秒：

实例

div {
  transition: width 2s, height 4s;
}

亲自试一试

指定过渡的速度曲线

transition-timing-function 属性规定过渡效果的速度曲线。

transition-timing-function 属性可接受以下值：

  • ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
  • linear - 规定从开始到结束具有相同速度的过渡效果
  • ease-in -规定缓慢开始的过渡效果
  • ease-out - 规定缓慢结束的过渡效果
  • ease-in-out - 规定开始和结束较慢的过渡效果
  • cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

下面的例子展示了可以使用的一些不同的速度曲线：

实例

#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}

亲自试一试

延迟过渡效果

transition-delay 属性规定过渡效果的延迟（以秒计）。

下例在启动之前有 1 秒的延迟：

实例

div {
  transition-delay: 1s;
}

亲自试一试

过渡 + 转换

下例为转换添加过渡效果：

实例

div {
  transition: width 2s, height 2s, transform 2s;
}

亲自试一试

更多过渡实例

您可以可以一一指定 CSS 过渡属性，如下所示：

实例

div {
  transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}

亲自试一试

或使用简写的 transition 属性：

实例

div {
  transition: width 2s linear 1s;
}

亲自试一试

CSS 过渡属性

下表列出了所有 CSS 过渡属性：

属性 描述
transition Abbreviated attribute used to set four transition properties to a single property.
transition-delay Define the delay of the transition effect (in seconds).
transition-duration Define how many seconds or milliseconds the transition effect should last.
transition-property Define the name of the CSS property targeted by the transition effect.
transition-timing-function Define the speed curve of the transition effect.