HTML CSS JAVASCRIPT MySQL PHP JQUERY LIQUID

CSS Animations

❮ Previous Next ❯

CSS enables you to make HTML elements move and change without needing JavaScript or Flash!

CSS

In this section, you'll discover information about these characteristics:

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

What are CSS Animations?

An animation makes something slowly shift from one look to another.

You are free to modify numerous CSS properties as often as you like.

To make CSS animation work, you need to define keyframes for the animation first.

Keyframes determine the styles that an element will have at specific moments in time.

The @keyframes Rule

When you include CSS styles within the @keyframes rule, the animation will slowly transition from its current appearance to a new appearance at specific intervals.

To make an animation function, you need to connect it to something on the web page.

Here is an example that connects the "example" animation to a box (represented by the <div> element). This animation will take 4 seconds to complete, during which it will smoothly transition the box's background color from red to yellow.

Note: The animation-duration property tells us how long an animation will last. If you don't set the animation-duration property, the animation won't happen, because it's set to 0s (which means zero seconds) by default.

In the provided example, we've indicated when the appearance will alter by using the words "from" and "to," which correspond to the beginning (0%) and end (100%) of the change.

You can also use percentages. When you use percentages, you can make many style changes as you want.

In this example, we will alter the background color of a "div" element at three specific points during an animation: when the animation is 25% done, 50% done, and finally when it's fully completed.

In this example, the <div> element's background color and position will be altered at three points during the animation: when it's 25% complete, 50% complete, and finally when the animation reaches 100% completion.

Delay an Animation

The animation-delay property tells the animation to wait before starting.

In this example, there is a 2-second wait before the animation begins.

You can use negative numbers too. When you use negative numbers, the animation will begin as if it had already been playing for a certain number of seconds (denoted as N).

In this example, the animation begins as if it had been running for 2 seconds already.

Set How Many Times an Animation Should Run

The animation-iteration-count property tells us how many times an animation will play.

The animation in the following example will repeat three times before it comes to a halt.

In this example, we use the word 'infinite' to make sure that the animation keeps going on endlessly.

Run Animation in Reverse Direction or Alternate Cycles

The animation-direction property tells us which way an animation should go: forward, backward, or back-and-forth.

The "animation-direction" property can be set to one of these options:

  • normal - The animation is played as normal (forwards). This is default
  • reverse - The animation is played in reverse direction (backwards)
  • alternate - The animation is played forwards first, then backwards
  • alternate-reverse - The animation is played backwards first, then forwards

The next example will make the animation go in the opposite direction (backward):

In this example, we use the word "alternate" to make the animation go forward and then backward.

In this example, we use the word "alternate" to make the animation go forward and then backward.

Specify the Speed Curve of the Animation

The animation-timing-function attribute tells us how fast an animation changes.

The "animation-timing-function" property can use these values:

  • ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
  • linear - Specifies an animation with the same speed from start to end
  • ease-in - Specifies an animation with a slow start
  • ease-out - Specifies an animation with a slow end
  • ease-in-out - Specifies an animation with a slow start and end
  • cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function

Here's an example that displays various speed curves you can use:

Specify the fill-mode For an Animation

CSS animations don't change how something looks before the first important moment in the animation or after it finishes. You can control this using the "animation-fill-mode" property.

The animation-fill-mode property tells us how the target element should look when the animation is not running. This includes the time before it begins, after it finishes, or even both.

The "animation-fill-mode" property can be set to different values:

  • none - Default value. Animation will not apply any styles to the element before or after it is executing
  • forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
  • backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
  • both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions

In this example, when an animation finishes, the <div> element keeps the style it had at the end of the animation.

In this example, the <div> element receives the style properties defined in the initial keyframe just before the animation begins, while waiting for the animation-delay period.

In this example, the <div> element will take on the style values that are defined in the initial keyframe just before the animation begins. It will also maintain the style values from the final keyframe once the animation has finished.

Animation Shorthand Property

The following example uses six animation properties:

You can create the same animation effect as shown above by using the short and simple animation property.

CSS Animation Properties

The table below displays the @keyframes rule and all the CSS animation properties, including their width and height.

Property Description
@keyframes Describes the code used for animations.
animation A shortcut way to set all the animation properties at once.
animation-delay Sets a waiting time before an animation begins.
animation-direction This code determines the direction of an animation: forwards, backwards, or in alternating cycles.
animation-duration This tells us how much time an animation needs to finish one full cycle.
animation-fill-mode Describes how an element should appear when the animation is not active, which can be before it begins, after it finishes, or in both cases.
animation-iteration-count This tells how many times an animation should repeat.
animation-name This tells us the name of the animation defined with @keyframes.
animation-play-state Indicates if the animation is actively playing or stopped.
animation-timing-function Describes how fast an animation moves.
❮ Previous Next ❯