Things that move are more interesting to look at than things that don't. I'm not saying the Mona Lisa isn't great, but imagine if she moved, too.
Today I'm going to walk through using CSS to create animations, and we'll create a pulsing button as our example.
The Example project
I've set up a super basic html page with a linked stylesheet. Since we're only using CSS to animate our button, we're not going to worry about the button actually doing anything. There are no servers or scripts involved.
Step 1: Keyframes
So, to animate our html button first we need to set up keyframes. Keyframes define (at least) what our animation should look like at the beginning and at the end of the animation. These are the key frames that are needed to understand what is supposed to change, and how.
Here's a good mental representation of keyframes from actual animation:
To define our keyframes, we start with the keyframes at-rule and give a name to our animation. We then will use CSS properties to describe the start and end states of our animation.
For our example we're going to call our keyframes 'grow' (since that's the basic as empty, because our animation is very simple and we don't need to effect the default state of our button element. Our last keyframe, however, we will add a transform property and set the element to scale to 1.1 times as big. If you want to learn more about transform, check out this documentation.
Step 2: Defining the animation style
With our keyframes set, we're ready to apply our animation using the animation property.
Like many other CSS properties, the animation property is made of other sub-properties which can be combined using the shorthand animation.
animation-name
The first sub property is the anination-name. This is simply the name of the keyframes that we want to use for this animation.
We'll set this to our "grow" keyframes
animation-duration
The next sub-property specifies how long the animation should take to complete an iteration. It can be entered in seconds or milliseconds.
Our button should grow rather quickly, so we'll set our duration to _____.
animation-timing-function
This property defines the acceleration curves of the progression through the keyframes. You can think of this as the internal timing of the animation. For example, ease-in-out makes the animation start slowly, speed up and then slow down towards the end. linear means that then animation will go move at a constant speed. You can also use cubic-bezier() which will allow you to define custom acceleration curves. More on all that here
We'll just use ease-in-out for the example.
animation-delay
Just like it sounds, you can set a delay for how long after the trigger (or the element is loaded) the animation starts. This can be in s or ms, and if negative will cause the animation to start immediately, but partway through.
Our button isn't going to delay, but take note of this option.
animation-iteration-count
Animation iteration count defines how many times our animation will play. By default it is 1, but we can enter a positive number or "infinite".
Let's have our animation repeat endlessly and set the animation-iteration-count to infinite.
animation-direction
Animations don't have to progress through keyframes in the same order. Animations can also run through their keyframes backwards. Using the animation-direction sub-property we can tell the element which direction to animate.
Combined with animation-iteration-count, this also affects how the animation resets after going through an iteration. Using `alternate will cause the animation to run in reverse every other iteration.
That's what we'll use for our button animation.
animation-fill-mode
This affects how the style of the element is affected before and after the animation. Most of the time, the default is fine, but there are specific cases where you may want to set this
animation-play-state
Play state can be used to control whether the animation is running or paused. This is useful for controlling CSS animations with JavaScript.
Since there's no JavaScript in our example, we can just leave this sub-property off.
Step 3: Applying animation to an element
After we have our variable with the sub-properties defined, we can apply it to our element just like any other CSS Property.
If you want your animation to run all the time (if the animation-iteration-count is infinite) or just run when the element loads, then that's it!
Instead, we are going to use the :hover pseudo-class to make our animation run when our button is hovered over.
Conclusion
So there we go! A pulsing button.
Here is all the CSS we used:
`
.button {
background-color: aqua;
border: 2px solid blue;
border-radius: 5px;
}
@keyframes grow {
from {}
to {transform:scale(1.1)}
}
.button:hover {
animation: grow 250ms linear 10ms infinite alternate;
}
`
Note: Transitions
There are also CSS Transitions which can be used in simpler cases, such as growing only or shrinking only.
Top comments (1)
Nice! Maybe show the code working as well?