H5中需要掌握的 ANIMATION 動畫效果

CSS3的動畫在PC網(wǎng)頁上或者APP上用得越來越多,比如H5頁面的應(yīng)用,目前在營銷傳播上的意義比較大,還有企業(yè)官網(wǎng)或者APP主要介紹也用得比較多,當(dāng)然還有很多地方都用到.所以學(xué)習(xí)css的動畫也迫在眉睫.那我們就進(jìn)入主題!

animation 屬性在CSS中可以使用其他的css屬性,來實現(xiàn)動畫,例如color,background-color,height或者width.每一個動畫需要定義@keyframes 動畫名,作為animation的屬性值,例如:

.element {
  animation: pulse 5s infinite;}@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }}

我們來實現(xiàn)下面這個動作:

HTML結(jié)構(gòu):

<div class="element"></div>

CSS代碼:

.element {
      width: 100%;
   height: 100%;
   animation: pulse 5s infinite;
}
@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

每一個 @keyframes 屬性規(guī)則的定義,都會在指定的時間內(nèi)發(fā)生動作.例如,動作從0%開始,到100%結(jié)束.keyframes 可以用簡寫方式,animation屬性來控制,或者其他八個子屬性,控制keyframes如何運作..

子屬性

• animation-name: 申明動畫@keyframes的名稱.

• animation-duration: 動畫在多久內(nèi)完成一個周期.

• animation-timing-function: 設(shè)置預(yù)加速度曲線動畫,例如 ease 或者linear.

• animation-delay: 動畫延遲執(zhí)行的時間.

• animation-direction: 設(shè)定動畫執(zhí)行完成后的方向.默認(rèn)是起始開始執(zhí)行.

• animation-iteration-count: 動畫執(zhí)行的次數(shù).

• animation-fill-mode:設(shè)定動畫是執(zhí)行之前還是之后.
  例如,你可以設(shè)置動畫保持在最后的狀態(tài),或者也可以切換回動畫開始的狀態(tài).

• animation-play-state: 開始或者暫停動畫

這些屬性可以這樣使用:

@keyframes stretch {
  /* declare animation actions here */}.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; }/*
  is the same as:
*/.element {
  animation: 
    stretch
    1.5s
    ease-out
    0
    alternate
    infinite
    none
    running;}

我們來看下這個動畫:

HTML結(jié)構(gòu):

<div class="element"></div>

CSS代碼:

.element {
    height: 250px;
    width: 250px;
    margin: 0 auto;
    background-color: red;
    animation-name: stretch;
    animation-duration: 1.5s;
    animation-timing-function: ease-out;
    animation-delay: 0;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    animation-play-state: running;
}
@keyframes stretch {
    0% {
        transform: scale(.3);
        background-color: red;
        border-radius: 100%;
    }
    50% {
        background-color: orange;
    }
    100% {
        transform: scale(1.5);
        background-color: yellow;
    }
}
body,
html {
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
}

下面是子屬性可以使用的所有值列表:

合并寫法

如果動畫有著同樣的開始和結(jié)束屬性,可以用逗號分隔0%和100%:

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }}

多個動畫

一個選擇器可以同時申明多個動畫,它們之間用逗號隔開.下面的例子,使用了兩個keyframe,也就是2個動畫的效果

.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;}

我們看下下面這個動畫

HTML代碼結(jié)構(gòu)

<div class="element"></div>

CSS代碼:

.element {
    height: 400px;
    width: 400px;
    background-color: red;
    animation:
    pulse 3s ease infinite alternate,
    nudge 5s linear infinite alternate;
    border-radius: 100%;
}
@keyframes pulse {
    0%, 100% {
        background-color: red;
    }
    50% {
        background-color: orange;
    }
}
@keyframes nudge {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(150px, 0);
    }
    80% {
        transform: translate(-150px, 0);
    }
}
html, body {
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
}

性能

多數(shù)動畫屬性都存在著性能問題,因此,我們在使用它們的時候,需要謹(jǐn)慎的去處理.可以,我們也可以和下面的安全性動畫一起使用:

• transform: translate()

• transform: scale()

• transform: rotate()

• opacity

原創(chuàng)內(nèi)容,轉(zhuǎn)載請注明出處.公眾微信號:bianchengderen,歡迎大家傳播與分享.

融入編程人的生活,了解他們的思維模式,了解他們的喜怒哀樂,關(guān)注編程的人.