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
- Great for dynamic animations
- requestAnimationFrame()
- Web Animations API
- GreenSock Animations Platform (GSAP)
- Velocity.JS
Learn More
Inspiration
Goat Any Questions?
Let's Animate The Web.
By David Khourshid
Let's Animate The Web.
- 8,090