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.
transform: translate3d(50px, 40px ,0px);
animation-timing-function: ease-in;
transform: translate3d(50px, 50px ,0px);
animation-timing-function: ease-out;
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 # 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?
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.
