Curriculum
Course: CSS Advanced
Login

Curriculum

CSS Advanced

CSS Rounded Corners

0/1

CSS Border Images

0/1

CSS Backgrounds

0/1

CSS Colors

0/1

CSS Color Keywords

0/1

CSS Gradients

0/3

CSS Shadow

0/2

CSS Text Effects

0/1

CSS Web Fonts

0/1

CSS 2D Transforms

0/1

CSS 3D Transforms

0/1

CSS Transitions

0/1

CSS Animations

0/1

CSS Tooltip

0/1

CSS Style Images

0/1

CSS Image Reflection

0/1

CSS object-fit

0/1

CSS object-position

0/1

CSS Masking

0/1

CSS Buttons

0/1

CSS Pagination

0/1

CSS Multiple Columns

0/1

CSS User Interface

0/1

CSS Variables

0/4

CSS Box Sizing

0/1

CSS Media Queries

0/1

CSS MQ Examples

0/1

CSS Flexbox

0/4
Text lesson

CSS Animations

This chapter covers the following properties:

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

Browser Support for Animations

The numbers in the table indicate the earliest browser version that fully supports the property.

Image

What are CSS Animations?

An animation enables an element to smoothly transition from one style to another, allowing for the alteration of multiple CSS properties as desired.

To utilize CSS animation, you need to define keyframes, which specify the styles the element will have at specific points in time.

The @keyframes Rule

When CSS styles are defined within the @keyframes rule, the animation will smoothly transition from the current style to the defined style at specified intervals. To activate an animation, it must be associated with an element.

In the following example, the “example” animation is applied to the <div> element. The animation duration is set to 4 seconds, during which the background-color of the <div> element will transition gradually from “red” to “yellow”.

Example 

/* The animation code */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Note: The animation-duration property dictates the duration of an animation’s complete cycle. If animation-duration is not set, the animation won’t occur, defaulting to 0s (0 seconds).

In the provided example, we use “from” and “to” keywords to signify the initial and final states (0% and 100% completion). Alternatively, percentages can be used to specify multiple style changes throughout the animation.

In the following example, the background-color of the <div> element changes at 25%, 50%, and 100% completion of the animation.

Example 

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

The provided example demonstrates altering both the background-color and position of the <div> element at 25%, 50%, and 100% completion of the animation.

Example 

/* The animation code */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

Delay an Animation

The animation-delay property determines a delay before the initiation of an animation.

In the following example, there is a 2-second delay before the animation begins.

Example 

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}

Negative values are also permitted. When using negative values, the animation begins as if it had been playing for N seconds prior.

In the following example, the animation starts as if it had been playing for 2 seconds already:

Example 

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: -2s;
}

Set How Many Times an Animation Should Run

The animation-iteration-count property determines how many times an animation should execute.

In the following example, the animation will run three times before stopping:

Example 

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}

In the following example, the animation is set to continue indefinitely by using the value “infinite”:

Example 

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

Run Animation in Reverse Direction or Alternate Cycles

The animation-direction property determines the playback direction of an animation and offers these values:

  • normal: Plays the animation forwards, which is the default behavior.
  • reverse: Reverses the animation, playing it backwards.
  • alternate: Alternates between forwards and backwards for each cycle.
  • alternate-reverse: Begins with a backwards playback and alternates with forwards for subsequent cycles.

In the following example, the animation is set to play in reverse direction (backwards):

Example 

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-direction: reverse;
}

In the provided example, the “alternate” value is utilized to execute the animation in a forward direction initially, followed by a backward motion.

Example 

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate;
}

In the given example, the “alternate-reverse” value is employed to initiate the animation with a backward motion first, followed by a forward movement.

Example 

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}

Specify the Speed Curve of the Animation

The animation-timing-function property defines the pace curve of an animation, offering various options:

  • “ease“: Provides a gradual acceleration, followed by constant speed, and finally a deceleration (default).
  • “linear“: Maintains a consistent speed throughout the animation.
  • “ease-in“: Initiates the animation with a slow start.
  • “ease-out“: Concludes the animation with a gradual slowdown.
  • “ease-in-out“: Commences the animation with a gentle start and concludes with a gradual slowdown.
  • “cubic-bezier(n,n,n,n)”: Allows custom values to be defined using a cubic-bezier function.

The following example illustrates different speed curves available for use.

Example 

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}

Specify the fill-mode For an Animation

The animation-fill-mode property allows you to control how styles are applied to an element before and after the animation plays.

It can have the following values:

  • “none“: Default value. No styles are applied to the element before or after the animation.
  • “forwards“: The element retains the styles set by the last keyframe after the animation ends.
  • “backwards“: The element adopts the styles set by the first keyframe and maintains them during the animation-delay period.
  • “both“: Combines the behaviors of “forwards” and “backwards”, extending the animation properties in both directions.

The following example demonstrates how the <div> element preserves style values from the last keyframe after the animation ends.

Example 

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}

The following example allows the <div> element to adopt the style values set by the first keyframe before the animation starts, maintaining them during the animation-delay period.

Example 

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: backwards;
}

The following example enables the <div> element to acquire the style values defined by the first keyframe before the animation commences, and to preserve the style values from the last keyframe once the animation concludes.

Example 

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-delay: 2s;
  animation-fill-mode: both;
}

Animation Shorthand Property

The example below utilizes six animation properties:

Example 

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

You can achieve the same animation effect as above by using the shorthand animation property.

Example 

div {
  animation: example 5s linear 2s infinite alternate;
}

 

 

 

 

Previous
Next