Tillitsdone
down Scroll to discover
CSS Animation Enhance Web Design with Dynamic Effects
Explore CSS animation to create dynamic and engaging web pages.

Learn about key properties like duration, timing, and direction to enhance user experience.
thumbnail

Constituent Properties

The animation property in CSS is a shorthand that combines several individual properties to control animations. Each property handles a specific part of the animation. Here are the constituent properties:

  1. animation-name:
    • Specifies the name of the @keyframes rule defining the animation.
  2. animation-duration:
    • Sets how long one cycle of the animation takes, in seconds (s) or milliseconds (ms).
  3. animation-timing-function:
    • Defines the speed curve of the animation (e.g., ease, linear).
  4. animation-delay:
    • Sets the time to wait before starting the animation, in seconds (s) or milliseconds (ms).
  5. animation-iteration-count:
    • Determines how many times the animation repeats (infinite for continuous looping).
  6. animation-direction:
    • Controls the direction of the animation (e.g., normal, reverse).
  7. animation-fill-mode:
    • Defines how styles are applied before and after the animation (e.g., forwards, backwards).
  8. animation-play-state:
    • Specifies whether the animation is running or paused (running, paused).

These properties can be set individually or combined using the animation shorthand for convenience.

Syntax

The animation property in CSS combines multiple animation properties into one declaration. The syntax is:

animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state];

Here’s a breakdown:

  • animation-name: The name of the @keyframes rule.
  • animation-duration: How long the animation takes.
  • animation-timing-function: The speed curve of the animation.
  • animation-delay: The delay before the animation starts.
  • animation-iteration-count: How many times the animation repeats.
  • animation-direction: The direction of the animation.
  • animation-fill-mode: How styles are applied before and after the animation.
  • animation-play-state: Whether the animation is running or paused.

Example

Here’s a simple example:

.element {
animation: slide 3s ease-in-out 1s infinite alternate;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}

In this example:

  • slide is the animation name.
  • 3s is the duration.
  • ease-in-out is the timing function.
  • 1s is the delay.
  • infinite means the animation repeats indefinitely.
  • alternate means the animation alternates direction each cycle.

Values

The animation property can take several values to control different aspects of the animation:

  1. animation-name:
    • The name of the @keyframes rule.
  2. animation-duration:
    • How long one cycle of the animation takes.
  3. animation-timing-function:
    • The speed curve of the animation (e.g., ease, linear).
  4. animation-delay:
    • The delay before the animation starts.
  5. animation-iteration-count:
    • How many times the animation repeats.
  6. animation-direction:
    • The direction of the animation (e.g., normal, reverse).
  7. animation-fill-mode:
    • How styles are applied before and after the animation (e.g., forwards, backwards).
  8. animation-play-state:
    • Whether the animation is running or paused.

Accessibility

While CSS animations can enhance the user experience, they can also affect accessibility. Here are some tips for making your animations accessible:

  1. Avoid Flashing and Blinking:
    • These can trigger seizures in people with photosensitive epilepsy.
  2. Provide Controls:
    • Give users the option to pause or stop animations.
  3. Use the Reduced Motion Media Query:
    • The prefers-reduced-motion media query allows you to provide a simplified version of your animations for users who prefer reduced motion.
    @media (prefers-reduced-motion: reduce) {
    .element {
    animation: none;
    }
    }
  4. Consider Vestibular Disorders:
    • Certain types of motion can be disorienting for people with vestibular disorders.
  5. Test with Real Users:
    • Regularly test your animations with a diverse group of users.

Resources for Accessible Animations

For more detailed guidelines on creating accessible animations, check out these resources:

By considering these accessibility factors, you can ensure your animations enhance the user experience for everyone.

Formal Syntax

The animation property in CSS lets you control animations easily by combining several properties into one. Here’s a simplified breakdown:

animation =
<single-animation>#
<single-animation> =
[<time>] || <easing-function> || [<time>] ||
<iteration-count> || <direction> ||
<fill-mode> || <play-state> ||
[none | <custom-ident> | <string>]
<easing-function> =
<linear> | <cubic-bezier> | <step>
<iteration-count> =
infinite | [<number>]
<direction> =
normal | reverse | alternate | alternate-reverse
<fill-mode> =
none | forwards | backwards | both
<play-state> =
running | paused
<keyframes-name> =
<custom-ident> | <string>
<linear> =
linear | <linear()>
<cubic-bezier> =
ease | ease-in | ease-out | ease-in-out | <cubic-bezier()>
<step> =
step-start | step-end | <steps()>
<linear()> =
linear([[<number>] && <percentage>]{0,2}#)
<cubic-bezier()> =
cubic-bezier([<number> [0,1]], [<number>]#){2}
<steps()> =
steps([<integer>], <step-position>?)
<step-position> =
jump-start | jump-end | jump-none | jump-both | start | end

Explanation of Syntax

  1. <single-animation>:
    • Represents a single animation. You can define multiple animations by separating them with commas.
  2. [<time>]:
    • Specifies the duration in seconds (s) or milliseconds (ms). The first occurrence sets the animation-duration, and the second sets the animation-delay.
  3. <easing-function>:
    • Defines how the animation speeds up and slows down. Can be ease, linear, ease-in, ease-out, ease-in-out, or a custom cubic-bezier function.
  4. <iteration-count>:
    • Determines how many times the animation repeats. Can be a number or infinite.
  5. <direction>:
    • Controls the direction of the animation: normal, reverse, alternate, or alternate-reverse.
  6. <fill-mode>:
    • Defines how styles are applied before and after the animation: none, forwards, backwards, or both.
  7. <play-state>:
    • Specifies if the animation is running or paused: running or paused.
  8. [none | <custom-ident> | <string>]:
    • Specifies the name of the animation. Can be none, a custom identifier, or a string.

CSS Animation Syntax

The animation property in CSS lets you create smooth transitions between different styles over a specific duration. Here’s a breakdown of its syntax:

  1. <single-animation>:

    • Defines a single animation. You can apply multiple animations by separating them with commas.
  2. [<time>]:

    • Sets the duration of the animation in seconds (s) or milliseconds (ms). If used twice, the first value sets the duration, and the second sets the delay.
  3. <easing-function>:

    • Controls the speed curve of the animation. Examples include ease, linear, ease-in, ease-out, and ease-in-out.
  4. <single-animation-iteration-count>:

    • Determines how many times the animation repeats. Can be a specific number or infinite.
  5. <single-animation-direction>:

    • Sets the direction of the animation. Options include normal, reverse, alternate, and alternate-reverse.
  6. <single-animation-fill-mode>:

    • Defines how the animation applies styles before and after execution. Options include none, forwards, backwards, and both.
  7. <single-animation-play-state>:

    • Specifies whether the animation is running or paused. The values can be running or paused.
  8. [none | <custom-ident> | <string>]:

    • Specifies the name of the animation. Can be none, a custom identifier, or a string.

Example

Here’s a basic example of how to use the animation property:

.element {
animation: slide 3s ease-in-out 1s infinite alternate forwards;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}

In this example:

  • slide is the name of the animation.
  • 3s is the duration of the animation.
  • ease-in-out is the timing function.
  • 1s is the delay before the animation starts.
  • infinite means the animation repeats forever.
  • alternate makes the animation alternate directions on each cycle.
  • forwards ensures the element keeps the final styles after the animation ends.

More Examples

Basic Animation

This example shows a simple animation that moves an element horizontally:

HTML:

<div class="element"></div>

CSS:

.element {
width: 100px;
height: 100px;
background-color: blue;
animation: slide 3s ease-in-out 1s infinite alternate;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}

Multiple Properties Animation

This example animates both the position and color of an element:

HTML:

<div class="element"></div>

CSS:

.element {
width: 100px;
height: 100px;
background-color: blue;
animation: moveAndChangeColor 3s ease-in-out 1s infinite alternate;
}
@keyframes moveAndChangeColor {
from {
transform: translateX(0);
background-color: blue;
}
to {
transform: translateX(200px);
background-color: red;
}
}

Multiple Animations

This example applies two animations to a single element:

HTML:

<div class="element"></div>

CSS:

.element {
width: 100px;
height: 100px;
background-color: blue;
animation: move 3s linear 1s infinite alternate, rotate 5s linear 0s infinite;
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

Animation with Delay and Fill Mode

This example uses animation-delay and animation-fill-mode:

HTML:

<div class="element"></div>

CSS:

.element {
width: 100px;
height: 100px;
background-color: blue;
animation: slide 3s ease-in-out 1s infinite alternate forwards;
}
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(200px);
}
}

Browser Compatibility

Ensuring your animations work across different browsers is crucial. Here’s a quick guide:

  • Chrome: 43.0 (May 2015)
  • Firefox: 16.0 (Oct 2012)
  • IE / Edge: 10.0 (Sep 2012)
  • Opera: 30.0 (Jun 2015)
  • Safari: 9.0 (Sep 2015)

For mobile/tablet:

  • Android Chrome: 128
  • Android Firefox: 127
  • Android: 4.4 (Sep 2013)
  • iOS Safari: 6.0-6.1 (Sep 2012)

Notes on Compatibility

  1. Vendor Prefixes: For older browsers, use vendor prefixes (e.g., -webkit-, -moz-, -o-, -ms-).
    .element {
    -webkit-animation: slide 3s ease-in-out 1s infinite alternate;
    -moz-animation: slide 3s ease-in-out 1s infinite alternate;
    -o-animation: slide 3s ease-in-out 1s infinite alternate;
    animation: slide 3s ease-in-out 1s infinite alternate;
    }
  2. Fallbacks: Provide fallbacks for browsers that don’t support animations.
    .element {
    /* Fallback for non-supporting browsers */
    transform: translateX(200px);
    /* Standard animation */
    animation: slide 3s ease-in-out 1s infinite alternate;
    }
  3. Test Thoroughly: Regularly test your animations across different browsers and devices.

Additional Resources

For more detailed information:

Conclusion

Understanding browser compatibility is essential for creating animations that work seamlessly across all platforms. Use vendor prefixes, provide fallbacks, and regularly test to ensure a consistent user experience.

See Also

These resources will help you gain a deeper understanding of CSS animations, their implementation, and best practices for accessibility and performance.

Get in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.