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

 CSS3的動畫在PC網頁上或者APP上用得愈來愈多,好比H5頁面的應用,目前在營銷傳播上的意義比較大,還有企業官網或者APP主要介紹也用得比較多,固然還有不少地方都用到.因此學習css的動畫也迫在眉睫.那咱們就進入主題!

 

animation 屬性在CSS中可使用其餘的css屬性,來實現動畫,例如color,background-color,height或者width.每個動畫須要定義@keyframes 動畫名,做爲animation的屬性值,例如:

 

 

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

}

咱們來實現下面這個動做:

HTML結構:

 

<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 屬性規則的定義,都會在指定的時間內發生動做.例如,動做從0%開始,到100%結束.keyframes 能夠用簡寫方式,animation屬性來控制,或者其餘八個子屬性,控制keyframes如何運做..

子屬性

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

• animation-duration: 動畫在多久內完成一個週期.

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

• animation-delay: 動畫延遲執行的時間.

• animation-direction: 設定動畫執行完成後的方向.默認是起始開始執行.

• animation-iteration-count: 動畫執行的次數.

• animation-fill-mode:設定動畫是執行以前仍是以後.
  例如,你能夠設置動畫保持在最後的狀態,或者也能夠切換回動畫開始的狀態.

• 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結構:

 

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

 

下面是子屬性可使用的全部值列表:

animation-timing-function	ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (例如. cubic-bezier(0.5, 0.2, 0.3, 1.0))
animation-duration	Xs 或者 Xms
animation-delay	Xs 或者 Xms
animation-iteration-count	X
animation-fill-mode	forwards, backwards, both, none
animation-direction	normal, alternate
animation-play-state	paused, running, running

合併寫法

若是動畫有着一樣的開始和結束屬性,能夠用逗號分隔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代碼結構

 

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

性能

多數動畫屬性都存在着性能問題,所以,咱們在使用它們的時候,須要謹慎的去處理.能夠,咱們也能夠和下面的安全性動畫一塊兒使用:

• transform: translate()

• transform: scale()

• transform: rotate()

• opacity

 

 本文屬於吳統威的博客,微信公衆號:bianchengderen 的原創文章,轉載時請註明出處及相應連接:http://www.wutongwei.com/front/infor_showone.tweb?id=151 ,歡迎你們傳播與分享.