CSS
Animation

Arran Ross-Paterson

Twitter @arranrp

A little html

<ul>
    <li>Nav text</li>
    <li>Nav text</li>
    <li>Nav text</li>
    <li>Nav text</li>
    <li>Nav text</li>
    <li>Nav text</li>
    <li>Nav text</li>
</ul>

On hover animation

• Name our animation
• Give it a starting state
• Add an end state
• Apply the animation to a class

@keyframes fade {
  from {
    background-color:#0E2840;  }

  to {
    background-color:#389EFF;
  }
}

.fade {
  animation-name: fade;
}

On hover animation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.

@keyframes fade {
  from {
    background-color:#0E2840;  }

  to {
    background-color:#389EFF;
  }
}

.fade {
  animation-name: fade;
  animation-duration: 100ms;
  animation-iteration-count: 1;
}

On hover animation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.

@keyframes fade {
  from {
    background-color:#0E2840;  }
    font-size: 100%;

  75% {
    font-size: 100%;
  }

  to {
    background-color:#389EFF;
    font-size: 125%;
  }
}

.fade {
  animation-name: fade;
  animation-duration: 100ms;
  animation-iteration-count: 1;
}

transforms

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat.

@keyframes fade {
  from {
    background-color:#0E2840;  }
    font-size: 100%;

  75% {
    font-size: 100%;
  }

  to {
    background-color:#389EFF;
    font-size: 125%;
  }
}

.fade {
  animation-name: fade;
  animation-duration: 100ms;
  animation-iteration-count: 1;
}