Follow this guide to learn how to add an animation to a website using the CSS Animations!
The setup for this concept will be fairly similar to the other concepts.
class
attribute to the second <p>
element that says “Style this paragraph…”class
to be update
<style></style>
element.update
as the selector{
and }
)At this point, the added code should look something like this:
HTML
<p class="update">Style this paragraph...</p>
CSS
.update {
}
The project should be ready for styling.
When animating using CSS, the styles are defined at certain keyframes. In animation and filmmaking, a keyframe is a drawing or shot that defines the starting and ending points of a smooth transition.
In CSS, these keyframes represent the styles of an element at a given point in time, during the animation cycle.
The goal for this animation will be to constantly transition from orange
to green
.
To make the color orange
at the very beginning of the animation (or, 0%
of the way through), the keyframe would look like a normal CSS ruleset, but with 0%
as the selector.
Open up the index.html file for editing, and make some more space at the top of the <style></style>
. Add this code to define the first frame of the animation:
0% {
color: orange;
}
Next, to make the color green
at the end of the animation (i.e., 100%
of the way through), add the following ruleset under the first one:
100% {
color: green;
}
Now, all that’s left is to put these two keyframes together is a @keyframes
ruleset that includes both frames. A keyframes ruleset consists of:
@keyframes
{}
){
and }
So, the 0%
and 100%
ruleset need to go inside of the @keyframes
ruleset. We’ll call this animation pulse
. At the very top of the <style></style>
element, open up the definition with:
@keyframes pulse {
For clarity, indent the 0%
and 100%
rulesets. Then, under both of those rulesets, close out the @keyframes
with a }
!
The whole animation definition should look something like this:
@keyframes pulse {
0% {
color: orange;
}
100% {
color: green;
}
}
After defining an animation’s keyframes, it must be applied to an element to take effect. Apply this animation to the <p class="update>
paragraph by creating a declaration that points to the pulse
animation.
Note that there are many options for the animation
property:
animation-duration
configures the length of time that an animation should take to complete one cycleanimation-iteration-count
configures the number of times the animation should repeatanimation-timing-function
configures the timing of the animationanimation-direction
configures whether or not the animation should alternate direction on each run through the sequenceanimation-name
specifies the name of the @keyframes
ruleset describing the animation’s keyframesFor the purposes of this walkthrough, all of them can be combined into one declaration, with the following format:
animation: animation-duration animation-iteration-count animation-timing-function animation-direction animation-name;
<style></style>
element, find the .update
ruleset{
and }
), create a new declaration with a property of animation
1s
so the animation takes one second to completeinfinite
so the animation goes on foreverlinear
so the animation happens smoothlyalternate
so the animation goes smoothly between orange and greenpulse
so the animation uses the keyframes specified by the pulse
animationThe ruleset in the <style></style>
for the <p class="update">
paragraph should look something like this:
.update {
animation: 1s infinite linear alternate pulse;
}
Load up the page, and make sure the text changes color continuously!
This was just a small example of what’s possible with CSS animations. You can animate any CSS property, and create any number of keyframes! Click here for to dive deeper into everything you can do.