CSS ƙanam

CSS ƙanam

CSS tунguan ràng nǐ zai gěi dìng shí jiān neǐn róng de biàn hǎo shu xing zhíng.

qing ba shǒu zhu yí dào zhè ge yuansu shang, lái chá kàn CSS tунguan xiaoguo:

CSS

zài zhè zhāng zhōng, nǐ jiāng xuè xué shì zhè xiàng shu xing:

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

duì tунguan de biǎo zhǒng zhī chí

biǎo zhōng de shù zì zhōngmò shì zhíchi shì yǒng zhè xiàng shu xing de shǔ liú bù zhàn.

attribute 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

ruo shi yong CSS tунguan?

ru xiang chuangzao tунguan xiaoguo, bixu mingque liang shi:

  • ni yao tianjia xiaoguo de CSS shu xing
  • xiaoguo de chuanxu shi jian

zhuyi:ru guo wei guan shi chuanxu shi jian bù fen, zhe tунguan bu hui you xiaoguo, yinwei mohui zhi xing wei 0.

xià miàn de lì li chengshì zhanshì le 100px * 100px de hóng sè <div> yuansu. <div> yuansu wei width shu xing zhi xingbie a tунguan xiaoguo, chuanxu shi jian wei 2 miao:

Example

div {
  width: 100px;
  height: 100px;
  background: red;
  tунguan: width 2s;
}

dama zhi ding de CSS shu xing (width) zhi xiang hua bi shi, jiang kaishi tунguan xiaoguo.

xianzai, a rang women wei width shu xing zhi xingbie a shu xing a xianzai zhi xing:

Example

div:hover {
  width: 300px;
}

Try it yourself

ka a kai, dama anfani a tasi a kai a kai a yu a jingli a xia, a ya xianji xianji a huanyi a zuoyuan shiylai.

Change the values of several attributes

The following example adds transition effects to both the width and height attributes, width is 2 seconds, and height is 4 seconds:

Example

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

Try it yourself

Specify the speed curve of the transition

transition-timing-function The attribute specifies the speed curve of the transition effect.

The transition-timing-function attribute can accept the following values:

  • ease - Specifies a transition effect that starts slowly, then accelerates, and then ends slowly (default)
  • linear - Specifies a transition effect that has the same speed from start to end
  • ease-in - Specifies a transition effect that starts slowly
  • ease-out - Specifies a transition effect that ends slowly
  • ease-in-out - Specifies a transition effect that starts and ends slower
  • cubic-bezier(n,n,n,n) - Allows you to define your own values in the cubic Bezier function

The following examples show some different speed curves that can be used:

Example

#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;}

Try it yourself

Delay transition effect

transition-delay The attribute specifies the delay of the transition effect (in seconds).

The following example has a 1-second delay before starting:

Example

div {
  transition-delay: 1s;
}

Try it yourself

Transition + Transformation

The following example adds a transition effect to the transformation:

Example

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

Try it yourself

More transition examples

You can specify CSS transition attributes one by one as shown below:

Example

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

Try it yourself

Or use the shorthand transition Attribute:

Example

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

Try it yourself

CSS transition attributes

The following table lists all CSS transition attributes:

attribute description
transition 简写属性，用于将四个过渡属性设置为单一属性。
transition-delay 规定过渡效果的延迟（以秒计）。
transition-duration 规定过渡效果要持续多少秒或毫秒。
transition-property 规定过渡效果所针对的 CSS 属性的名称。
transition-timing-function 规定过渡效果的速度曲线。