Getting creative with
KEYFRAMES
Amit Sheen
@amit_sheen
Who am I?
I'm an experienced web developer, doing mainly front-end,
specializing in CSS, animations, and creative coding.
I have a pathological curiosity about new technologies, I'm eager
to learn new things, and always ready for a new challenge.
Working as a front-end developer at
AmitSh.com @amit_sheen @amit_sheen
@amit_sheen
Iteration
Duration
Play-state
Fill-mode
Direction
Delay Timing-function
@amit_sheen
Keyframes
Controls the intermediate steps in a CSS
animation sequence by defining styles
for keyframes (or waypoints) along the
animation sequence. (from MDN)
@keyframes name {
key { frame }
key { frame }
key { frame }
}
@amit_sheen
animation: cubeHeight 3s infinite;
@keyframes cubeHeight {
??? { ??? }
}
@amit_sheen
animation: cubeHeight 3s infinite;
@keyframes cubeHeight {
0% { height: 0; }
75% { height: 100px; }
100% { height: 0; }
}
@amit_sheen
Timing functions
• Ease-in • Ease-in-out
Cubic value: 0.42, 0, 1.0, 1.0 Cubic value: 0.42, 0, 0.58, 1.0
• Ease-out • Ease
Cubic value: 0, 0, 0.58, 1.0 Cubic value 0.25, 0.1, 0.25, 1.0
@amit_sheen
Timing functions
• Linear • Steps • Cubic-bezier
(Just a straight line) (No transition) (Do what you want)
Check out https://cubic-bezier.com
@amit_sheen
animation-name: ballScale;
@keyframes ballScale {
??? { ??? }
}
@amit_sheen
animation-name: ballScale;
@keyframes ballScale {
??? { ??? }
}
@amit_sheen
animation: ballScale 8s;
@keyframes ballScale {
0% { transform: scale(0); animation-timing-function: ease-out; }
16% { transform: scale(2); animation-timing-function: ease-in; }
28% { transform: scale(1); }
65% { transform: scale(1); animation-timing-function: ease-in-out; }
70% { transform: scale(2); }
75% { transform: scale(1); }
80% { transform: scale(2); }
100% { transform: scale(1); }
}
Ease-out Ease-in ??? Ease-in-out
@amit_sheen
@amit_sheen
@amit_sheen
@amit_sheen
@amit_sheen
@amit_sheen
Don’t be Negative
…Unless you need to
@amit_sheen
Don’t be Negative
@amit_sheen
Don’t be Negative
@amit_sheen
A counterthought...
sometimes, animations doesn’t need to sync at all
@amit_sheen
Recap...
Start with a clear description
Draw a simple graph for each animation
And use negative delay (where needed)
Stay performant
Stay accessible
@amit_sheen
Thanks for listening
Amit Sheen
AmitSh.com @amit_sheen @amit_sheen
