Let's Animate

The Web.

@orangedrum

@davidkpiano

Who are we?

Jean Kaluza

UX Designer

@orangedrum

 

David Khourshid

Web Developer

@davidkpiano

Why Animate

The web?

Check out the video!

How To Animate

The web?

CSS Transitions

  • "Tweening" properties
  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay
  • Stick to:
    • opacity
    • transform

CSS Transitions

.box {
    transition-property: opacity;
    transition-duration: 0.4s;
}

0.3

1.0

CSS Animations

  • Controlled w/ @keyframes
  • Fine-tuned timing
  • Multiple iterations
  • Play state control
  • animation-name
  • animation-duration
  • animation-delay
  • animation-timing-function
  • animation-iteration-count
  • etc.

CSS Animations

0%

50%

100%

@keyframes color-rotate {
    0% {
        background: yellow;
    }
    50% {
        background: green;
    }
    100% {
        background: red;
        transform: rotate(45deg);
    }
}

Javascript Animations

Learn More

Inspiration

Goat Any Questions?

Let's Animate The Web.

By David Khourshid

Let's Animate The Web.

  • 8,090