Let's talk about CSS animations!
A little background, I've been in the sports Creative Services world for the last eight years. Doing everything from motion graphics, graphic design, video production. You know, the fun stuff! With going into Software Development, I've tried to look at building my foundations in many different areas. One area has been CSS, especially CSS animations. Anyways, enough about that, lets get to the fun.
This is going to be a simple blog on how to do some very easy animations, including manipulations, movement and maybe some more fun!
Let's get started!
First, a little background:
What are animations? What are CSS animations? Well, with an animation, you are looking to make something animate a certain way on the screen. It can be to change its shape, color, property, location, or just go away all together. But how do we do that? We use what's is known as @keyframes.
A keyframe is a moment in time from 0-100 that you mark on the timeline to key up when something is going to change. Will it change once or over time? That's all determined by you, the creator, to when you want it to start and end.
Let's take a look at a simple animation.
Simple animation
In the first Codepen example we are binding the animation to the
element and it will last for six seconds, it will change the background-color from green to blue.
We told the @keyframes to change by using the keywords "from" and "to" which represents 0s to however many seconds we tell it to last for. In our case, six seconds (6s).
Using percentages for time
You can also break down time even more with percentages.
As you can see here, we used 0% orange, 25% aqua, 50% blue, 100% green. you can also get more intense and figure out different percentage values. However, they all have to equal to 100%.
Changing color over time and location
The final point I'm going to cover in this simple example is that you can also change the animations color and position. Exciting, huh!?
Inside this animation we see the brick is now longer and starts out black. But what's interesting is now we tell it where on the page to move to and where to keep moving to with each keyframe percentage.
Of course we could change the positions all we want. One thing to keep in mind is if you look in the @keyframes, you'll notice a piece that says left. This is the left side of the object. If we were to change that to right, we would see that the right part of the object would reach its destination and the animation would change for that instance only.
That's all for this simple CSS animation piece. I'll be looking at moving into more advanced CSS animations soon.
Top comments (1)
make some more css animation effect, and what is your concept when need to break some seconds when animation running