Teeny, Tiny, Technical Tidbits: Let’s Get Animated
On this last big project I worked on, I created a few basic CSS animations. In this quick post, I’m going to talk about my code and what exactly is happening.
I wanted to embed some images as well, but tumblr got weird with me, and I didn’t prioritize to figure it out.
CSS ANIMATIONS
Code:
@keyframes bobble {
0%{
transform: translate3d(50px, 40px ,0px);
animation-timing-function: ease-in;
}
50%{
transform: translate3d(50px, 50px ,0px);
animation-timing-function: ease-out;
}
100%{
transform: translate3d(50px, 40px ,0px);
}
}
The animation property is, duh, what animations your element. On a basic level, you enlist three things for animations:
The name of your animation
The time (duration)
The # of times your animation will loop (Or how long it will delay/start and stop, which I guess constitutes as a fourth element)
The bobble element specifies the name of my animation. In this instance, it’s just transforming it up and down; moving it up and down. “Bobble” // In other cases, transform can be more: rotation, skewing, bloating, etc. Normally, you see that specified as transform-origin, but I honestly haven’t worked with CSS animations for too long to be able to go into that one deeper.
So, what’s up with these percentages?
0% - 50% - 100% —----
This is where your duration comes into play.
0 is your start, 50 is your “middle”, and 100 is the end. Each percentage contains your individual animation sequences within the entirety of animation container. This is where you say: how do I want this animation to run from start to finish?
Easing is really what brings your animations to life - it makes them feel more natural. For a really great resource on understanding linear vs. non-linear:
Generally, we want to avoid linear animations. We want to have a feeling of some progression of motion.
https://developers.google.com/web/fundamentals/design-and-ui/animations/the-basics-of-easing?hl=en
I’ve found that I really like Google Developers walkthroughs overall. Their custom easing graphs and descriptions are really thorough and informative.
https://developers.google.com/web/fundamentals/design-and-ui/animations/custom-easing?hl=en
Also, little hopefully helpful side note: When I was working with the CSS animations, I became extremely frustrated by them not showing up. We can control this easily with the z-index. You have to remember that your site is not just 2 dimensional, your elements do technically lie on a 3-plane system.
