????? ?? ?? :

? ??? ????? ?? ??, ? ?????? ???? ? ??? ??? ?????.

????? ??? ?(s) ?? ???(ms) ??? ??? ? ????.

??:

<code>@keyframes animationName {
  from {
    /* 開始樣式 */
  }
  to {
    /* 結(jié)束樣式 */
  }
}</code>

?:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可見 */
  }
  to {
    opacity: 1; /* 可見 */
  }
}</code>

????? ?? ??? ???? ??? ???? 0?(???)? ???? ?????? ????? ??????.

????? ??? ??

??:

? ??? ?????? ?? ??? ???? ? ?????. ?, ? ??? ???? ?????? ??? ?????, ??? ??? ?????, ??? ????? ??? ? ????.

?? ?? ????:

• ??: ?????? ??? ??? ?????.
• ease: ??? ????, ??? ???, ??? ????.
• ease-in: ??? ?????.
• ease-out: ??? ????.
• ease-in-out: ?? ??? ?? ?.
• cubic-bezier(x1, y1, x2, y2): ??? ?? ?? ??.

?:

<code>.element {
  animation-name: fadeIn; /* 動(dòng)畫名稱或@keyframes */
  animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}</code>

????? ??

??:

? ??? ?????? ???? ?? ???? ??, ? ????? ?? ??? ?????.

??:

<code>.box {
   height: 100px;
   width: 100px;
   background-color: rgb(44, 117, 117);
   animation-name: fadeIn;  /* 動(dòng)畫名稱 */
   animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}
@keyframes fadeIn {
   from {
     opacity: 0; /* 不可見 */
   }
   to {
     opacity: 1; /* 可見 */
   }
}</code>

?:

<code>animation-name: animationName;</code>

????? ?? ??

??:

? ??? ?????? ?? ??, ? ?????? ? ? ????? ???? ? ?????.

?? ?? ????:

• 1: ?????? ? ?? ?????(???).
• ??: ?????? ?? ?????.
• ? ?? ??: ??? ???? ?????? ?????.

?:

<code>animation-name: fadeIn;</code>

????? ??

??:

? ??? ?????? ??? ?????.

?? ?? ????:

• normal: ?????? ??? ?????(???).
• reverse: ?????? ????? ?????.
• ??: ?????? ??? ? ?, ?? ? ? ??? ?????.
• alternate-reverse: ?????? ?? ????? ??? ?? ??? ?????.

?:

<code>animation-duration: time;</code>

????? ??? ??

??:

? ??? ????? ?? ?? ?? ? ??? ???? ???? ? ?????. ?????? ???? ?? ? ??? ????? ?? ???? ?????.

????? ??? ?? ??? ??? ? ???? ????? ?? ?? ??? ? ???? ??? ? ????.

?? ?? ????:

• ??: ????? ??? ???? ???? ????.
• ???: ?????? ? ???? ?????.
• ??: ?? ?? ?? ?????? ?? ???? ?????.
• ? ?: ?? ? ? ???? ?????.

?:

<code>animation-duration: 4s; /* 動(dòng)畫將運(yùn)行4秒 */</code>

????? ?? ??

??:

? ??? ?????? ??(?? ? ?? ?? ??)? ?????.

?? ?? ????:

• running: ?????? ?????.
• ?? ???: ?????? ????? ??? ?????.

?:

<code>@keyframes animationName {
  from {
    /* 開始樣式 */
  }
  to {
    /* 結(jié)束樣式 */
  }
}</code>

? ??? ??? ?????(?: ??? ?? ? ????? ?? ??)? ?????.

????? ?? ??

????? ??? ???? ? ?? ?? ????? ??? ??? ? ????. ? ????? ??? ??? ???? ?? ???? ??? ?? ? ?? ??? ? ????.

??:

<code>@keyframes fadeIn {
  from {
    opacity: 0; /* 不可見 */
  }
  to {
    opacity: 1; /* 可見 */
  }
}</code>

?:

<code>.element {
  animation-name: fadeIn; /* 動(dòng)畫名稱或@keyframes */
  animation-duration: 2s; /* 動(dòng)畫持續(xù)時(shí)間 */
}</code>

??

• ????: ?????? ?????.
• 3?: ????? ?? ??? 3????.
• ease-in-out: ?? ?? ??? easy-in-out???. ?, ?????? ??? ???? ??? ????? ?? ?????.
• 1s: 1? ?? ? ?????? ?????.
• infinite: ?????? ??? ?????.
• ??: ? ???? ?????? ??? ??? ?????.
• ???: ??? ????(100%)? ??? ???? ?????? ??? ??? ?????.

????? ???

CSS ?????? ???? ?? ?? ??, ?? ? ??? ??? ???? CSS ????? ?? ??? ??????.

?? ??? ???? GitHub?? ?? ??? ????? ? ????.

http://ipnx.cn/link/02f5df8adf0db026d38425594e68a007

?????.

??? ???? ?????.

????? ?????.

? ??? ??? ??? ? ??? ???? ???? ?? ? ? ???? ?? ??? ???.

?? ?? ? ?? ???? ??? ??? ?????.

X(Twitter)?? ?? ?????? ???? ? ?? ?? ???? ? ????.

?? ?????! !