INTERMEDIATE: C257

PET GALORE

RECAP

We created the Quote of the Day webpage.

Transformation

Transition

Image1

Image2

@Hemangi:

Defining Key frame animation Syntax

@keyframes mymove {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-30px);
  }
  60% {
    transform: translateY(-15px);
  }
}

DID YOU KNOW?

Key frame animations is one of the traditional animations.

IN THE NEXT CLASS

We will create a Night and day web page.

PROJECT

Help Mia to create the fun smile web page.

ADDITIONAL ACTIVITY