[CSS] Keyframe Animations

Create the Animation

@keyframes <name-animation>{
  <step 1> {<property>: <value>; }
  <step 2> {<property>: <value>; }
}
例:
@keyframes swing{
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

上例等同於以下(0%等於from,100%等於to):
@keyframes swing{
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-10deg);
  }
}

 

Assign the Animation

注意: <duration> 一定要在 <delay> 之前。
animation: <name> <duration> <delay> <iteration> <timing function>;
例:
#left-arm{
  transform-origin: top center;
  animation: swing 2s 0s infinite ease;
}

範例:

Multi-step Keyframes

例:
@keyframes swing{
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

上例因為 0%, 50%, 100% 都有相同的 code,故也可寫成:
@keyframes swing{
  0%, 50%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}

 

Advanced Keyframe Animations

infinite也可改成none(default)、forwards(停留在最後的狀態)

您可在此處留言

搶先留言!

avatar
  Subscribe  
Notify of