CSS3 Animations

Welcome to the world of dynamic web experiences with CSS animations. Whether you're looking to animate text, images, or elements, CSS provides a powerful toolkit. From keyframes to hover animations, explore the creative possibilities of adding movement and interactivity to your web projects.

In the previous chapter, we covered simple animations using CSS3 transitions, which allowed you to animate a property from one value to another. However, transitions have limited control over the animation's progression over time.

CSS3 animations take it a step further by introducing keyframe-based animations, which allow you to define changes in CSS properties over time using a set of keyframes, similar to flash animations. Creating CSS animations involves two steps, as demonstrated in the example below:

• The first step is defining individual keyframes and naming an animation using a keyframes declaration.
• The second step is referencing the keyframes by name using the animation-name property, and optionally adding animation-duration and other properties to control the animation's behavior.

It's important to note that you don't necessarily need to define the keyframes before referencing or applying them. The following example illustrates how to animate a <div> box horizontally from one position to another using CSS3 animations.

<style>
.box {
	margin: 50px;
    width:153px;
    height:103px;
    background: url("tortoise-transparent.png") no-repeat;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: moveit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: moveit;
    animation-duration: 2s;
}
     
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
     
/* Standard syntax */
@keyframes moveit {
    from {left: 0;}
    to {left: 50%;}
}
</style>

• Try this code

To trigger an animation, you need to specify at least two properties: animation-name and animation-duration (which must be greater than 0). The remaining animation properties are optional, as they have default values that won't hinder the animation from occurring.

Not all CSS properties can be animated. Generally, properties that accept numerical, length, percentage, or color values can be animated.

Keyframes are used to specify the values of animating properties at different stages of the animation. They are defined using the specialized CSS at-rule @keyframes. The keyframe selector for a keyframe style rule begins with a percentage (%) or the keywords from (equivalent to 0%) or to (equivalent to 100%). The selector determines where a keyframe is placed along the animation's duration.

Percentages represent a portion of the animation duration. For example, 0% represents the starting point, 100% represents the end point, and 50% represents the midpoint. Therefore, a 50% keyframe in a 2-second animation would occur at 1 second into the animation.

<style>
.box {
    margin: 50px;
    width:120px;
    height:110px;
    background: url("star-fish-transparent.png") no-repeat;
    position: relative;
    left: 0;
    /* Chrome, Safari, Opera */
    -webkit-animation-name: shakeit;
    -webkit-animation-duration: 2s;
    /* Standard syntax */
    animation-name: shakeit;
    animation-duration: 2s;
}
    
/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}
    
/* Standard syntax */
@keyframes shakeit {
    12.5% {left: -50px;}
    25% {left: 50px;}
    37.5% {left: -25px;}
    50% {left: 25px;}
    62.5% {left: -10px;}
    75% {left: 10px;}
}
</style>

• Try this code

When creating animations, there are multiple properties to consider. However, it's also possible to specify all the animation properties in a single property to reduce code length. The animation property serves as a shorthand for setting all the individual animation properties at once, following the specified order. For example:

<style>
.box {
	margin: 50px;
    width:103px;
    height:130px;
    background: url("octopus.png") no-repeat;
    position: relative;
    /* Chrome, Safari, Opera */
    -webkit-animation: repeatit 2s linear 0s infinite alternate;
    /* Standard syntax */
    animation: repeatit 2s linear 0s infinite alternate;
}
     
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}
     
/* Standard syntax */
@keyframes repeatit {
    from {left: 0;}
    to {left: 50%;}
}
</style>

• Try this code

Note: If any value is missing or unspecified, the default value for that property will be used. Consequently, if the animation-duration property value is missing, no animation will occur because its default value is 0.

• animation: This property combines all animation properties into a single declaration.
• animation-name: It specifies the name of the animations defined using @keyframes that should be applied to the selected element.
• animation-duration: It determines the duration, in seconds or milliseconds, for one complete cycle of the animation.
• animation-timing-function: It controls the progression of the animation over the duration of each cycle, using easing functions
• animation-delay: It determines when the animation will start.
• animation-iteration-count: It sets the number of times an animation cycle should be played before stopping.
• animation-direction: It determines whether the animation should play in reverse on alternate cycles.
• animation-fill-mode: It specifies how a CSS animation should apply styles to its target before and after execution.
• animation-play-state: It indicates whether the animation is currently running or paused.
• @keyframes: It specifies the values for the animating properties at various points throughout the animation.

What is CSS3 animation, and how does it differ from CSS transitions?

CSS3 animations and transitions are both techniques for adding motion effects to HTML elements. However, they differ in how they control and define the motion.

• CSS3 Animations: CSS3 animations allow you to create complex and multi-step animations using keyframes. You define keyframes to specify how an element should change over time, and then you apply these keyframes to an element. Animations offer more control over the animation's timing, duration, and iteration.
• CSS Transitions: CSS transitions, on the other hand, are simpler and involve changing an element's property smoothly over a specified duration when a triggering event occurs, such as hovering over an element. Transitions are better suited for simple, single-property animations.

CSS3 Animations: CSS3 animations allow you to create complex and multi-step animations using keyframes. You define keyframes to specify how an element should change over time, and then you apply these keyframes to an element. Animations offer more control over the animation's timing, duration, and iteration.

CSS Transitions: CSS transitions, on the other hand, are simpler and involve changing an element's property smoothly over a specified duration when a triggering event occurs, such as hovering over an element. Transitions are better suited for simple, single-property animations.

What are keyframes in CSS3 animations, and how are they used?

Keyframes in CSS3 animations are used to define intermediate steps or stages of an animation. They allow you to specify how an element should appear at various points during the animation. Keyframes are defined using the @keyframes rule, followed by a name for the animation sequence and a set of CSS properties and values at different percentages of completion (from 0% to 100%).

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

In this example, the slide-in animation moves an element from left to right, transitioning from 0% to 100% completion.

How do you apply CSS3 animations to HTML elements?

You can apply CSS3 animations to HTML elements using the animation property within the element's CSS rule. The animation property accepts several values, including:

• animation-name: Specifies the name of the keyframes animation.
• animation-duration: Specifies the duration of the animation.
• animation-timing-function: Sets the timing function (easing) for the animation.
• animation-delay: Adds a delay before the animation starts.
• animation-iteration-count: Determines how many times the animation repeats.
• animation-direction: Controls the direction of the animation (normal, reverse, alternate, etc.).

.animated-element {
  animation-name: slide-in;
  animation-duration: 2s;
  animation-timing-function: ease;
  animation-delay: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

How can you create a looping animation using CSS3?

To create a looping animation in CSS3, you can use the animation-iteration-count property and set it to infinite. This will cause the animation to repeat indefinitely. For example:

.looping-animation {
  animation-name: slide-in;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

In this case, the slide-in animation will continuously loop as long as the element with the class looping-animation is in the document.

What is the purpose of the animation-fill-mode property in CSS3 animations?

The animation-fill-mode property determines how an element's styles should be applied before and after the animation. It can take one of four values:

• none: Default behavior. No styles are applied before or after the animation.
• forwards: The styles defined in the final keyframe (100%) are applied to the element after the animation completes.
• backwards: The styles defined in the initial keyframe (0%) are applied to the element before the animation starts.
• both: Combines the effects of both forwards and backwards, applying styles from the initial and final keyframes.

The animation-fill-mode property is useful for ensuring that an element retains a specific appearance before or after an animation.

CSS3 animations offer a powerful way to bring dynamic and eye-catching effects to web design. With CSS3, you can create keyframe-based animations that allow for precise control over the timing and sequence of animated transitions. CSS3 animations enable you to animate various properties of elements, such as position, size, color, and opacity, bringing them to life with smooth and visually appealing movements. By using CSS for animation, developers have a versatile set of tools that can be applied to text, images, and different elements on a website.

CSS animations unfold a realm of possibilities, offering intricate control over various aspects, including background changes, text transformations, and image animations. Whether triggered on hover, scroll, or through purposeful generators, CSS animations enable designers to craft visually appealing and interactive websites that resonate with users. The ability to rotate, scale, or morph elements with precision adds a layer of sophistication to modern web design, showcasing the creative potential embedded within CSS animations.