CSS-putous

CSS-putous

CSS-siirtymä mahdollistaa ominaisuusarvojen pehmeän muutoksen annetulla ajalla.

Siirrä hiiren osoitin tähän elementtiin nähdäksesi CSS-siirtymäefektin:

CSS

Tässä luvussa opit seuraavat ominaisuudet:

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

Siirtymän selaimen tuki

Taulukossa olevat numerot osoittavat ensimmäisen selaimen version, joka tukee ominaisuutta täysin.

ominaisuudet Chrome IE Firefox Safari Opera
siirtymä 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

Miten käyttää CSS-siirtymää?

Jotta voit luoda siirtymäefektin, sinun on määritettävä kaksi asiaa:

  • CSS-ominaisuus, johon haluat lisätä efektin
  • Efoon kesto

Huomioitavaa:Jos ei määritetä kestoa, siirtymäefekti ei toimi, koska oletusarvo on 0.

Alla oleva esimerkki näyttää 100px * 100px:n punaisen <div>-elementin. <div>-elementti määrittää myös width-ominaisuudelle siirtymäefektin, jonka kesto on 2 sekuntia:

esimerkki

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

Kun määritelty CSS-ominaisuus (width) muuttuu, käynnistyy siirtymäefekti.

Nyt määritetään width-ominaisuudelle uusi arvo, kun hiiren osoitin on <div>-elementin päällä:

esimerkki

div:hover {
  width: 300px;
}

Kokeile itse

Huomaa, että kun osoitin siirtyy elementistä pois, se palautuu vähitellen alkuperäiseen tyyleihinsä.

Muuta useita ominaisuusarvoja

Seuraavassa esimerkissä lisätään siirtymäefekti sekä leveys- että korkeusominaisuuksiin, leveys on 2 sekuntia ja korkeus 4 sekuntia:

esimerkki

div {
  transition: leveys 2s, korkeus 4s;
}

Kokeile itse

Määritä siirtymän nopeuskaari

transition-timing-function Ominaisuus määrittelee siirtymäefektin nopeuskaarian.

transition-timing-function-ominaisuus voi hyväksyä seuraavat arvot:

  • ease - Määrittelee siirtymän, joka alkaa hitaasti, kiihtyy sitten ja päätyy jälleen hitaasti (oletus)
  • lineaarinen - Määrittelee siirtymän, jossa alusta loppuun on sama nopeus
  • ease-in - Määrittelee siirtymän, jossa alku on hitaampi
  • ease-out - Määrittelee siirtymän, jossa loppu on hitaampi
  • ease-in-out - Määrittelee siirtymän, jossa alku ja loppu ovat hitaita
  • cubic-bezier(n,n,n,n) - Mahdollistaa arvojen määrittämisen kolmiosaisessa Bezier-funktiossa

Seuraavassa esimerkissä näytetään erilaisia nopeuskaarioita, joita voidaan käyttää:

esimerkki

#div1 {transition-timing-function: lineaarinen;}
#div2 {transition-timing-function: pehmeä;}
#div3 {transition-timing-function: pehmeä-alku;}
#div4 {transition-timing-function: pehmeä-lopussa;}
#div5 {transition-timing-function: pehmeä-alku-pehmeä-loppu;}

Kokeile itse

Viivytä siirtymäefektiä

transition-delay Ominaisuus määrittelee siirtymäefektin viiveen (sekunneissa).

Seuraavassa esimerkissä on 1 sekunnin viive ennen käynnistystä:

esimerkki

div {
  transition-delay: 1s;
}

Kokeile itse

Siirtymä + Muotoilu

Seuraavassa esimerkissä lisätään siirtymäefekti muotoiluun:

esimerkki

div {
  transition: leveys 2s, korkeus 2s, muotoilu 2s;
}

Kokeile itse

Lisää siirtymäesimerkkejä

Voit yksitellen määrittää CSS-siirtymäominaisuudet seuraavasti:

esimerkki

div {
  transition-property: leveys;
  transition-duration: 2s;
  transition-timing-function: lineaarinen;
  transition-delay: 1s;
}

Kokeile itse

tai käytä lyhennettyä siirtymä ominaisuus:

esimerkki

div {
  transition: leveys 2s lineaarinen 1s;
}

Kokeile itse

CSS-siirtymäominaisuudet

Seuraavassa taulukossa luetellaan kaikki CSS-siirtymäominaisuudet:

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