CSS Animation Example

--- title: "Explain CSS animation with an example" description: "CSS animation provides a way to create smooth and complex visual effects without needing to rely on JavaScript." author: "Ashutosh Patel" published: 2024-06-11 updated: 2024-06-11 canonical: https://www.mindstick.com/blog/304341/explain-css-animation-with-an-example category: "css-css3" tags: ["css-css3", "css", "css animation", "css styling"] reading_time: 3 minutes --- # Explain CSS animation with an example ### CSS Animation CSS [animations](https://www.mindstick.com/forum/160680/how-to-use-css-transitions-and-animations-in-the-webpage) allow you to animate CSS [property](https://www.mindstick.com/blog/205/property-notification-in-c-sharp) values over time. They provide a simple and robust [approach](https://www.mindstick.com/interview/985/what-are-the-approaches-that-you-will-follow-for-making-a-program-very-efficient) to [graphics](https://www.mindstick.com/articles/336067/html-graphics-using-html) without having to rely on JavaScript. #### Basics of CSS animation ## @keyframes rule This defines the stages of the [animation](https://www.mindstick.com/articles/13040/seven-helpful-tips-to-start-and-grow-an-animation-video-company), which determine how the element will be changed at different times. **Animation [properties](https://www.mindstick.com/articles/23331/nootropics-7-different-types-and-their-unique-properties)** These properties are used to apply animation to an element and control its actions, such as animation name, animation [duration](https://answers.mindstick.com/qa/45301/what-is-a-short-duration-discussion), animation time [function](https://www.mindstick.com/articles/13001/multi-statement-table-valued-user-defined-function-in-sql-server), animation delay, and so on #### CSS code for Animation ```css /* Define the animation using @keyframes */ @keyframes moveAndChangeColor { 0% { background-color: red; transform: translateX(0); } 50% { background-color: yellow; transform: translateX(50%); } 100% { background-color: green; transform: translateX(100%); } } /* Apply the animation to the element */ .animated-box { width: 100px; height: 100px; background-color: red; animation-name: moveAndChangeColor; animation-duration: 4s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } ``` #### In the above code- ## @ keyframes moveToChangeColor This defines the `moveAndChangeColor`animation. At `0%` (initially) the box turns red and is in the first position. At `50%` (half) the box turned red and moved to 50% of the object width. `100%` (finally) the box is green and has gone to 100% of its product width. ## .animated-box This class is applied to the `

` element. `animation-name: moveAndChangeColor;` Applies the `moveAndChangeColor`animation to the element. `animation-duration: 4s;` The animation shows that one cycle should be completed in 4 seconds. `animation-time-function:ease-in-out;` The animation starts out slow, speeds up in the middle, and slows down again at the end. `animation - iteration - count : infinite;` The animation repeats forever. ## Example- Here is a basic example that demonstrates the CSS animation, ```html CSS Animation Example

CSS Animation Example

``` ## Output- ![Explain CSS animation with an example](https://www.mindstick.com/blogs/3604f80d-48f3-4158-b0ab-ea4a1d146679/images/49c531f5-cb94-46b6-970f-7b5320a460df.jpg) If you open this HTML file in a browser, you will see a box that smoothly changes its [background color](https://www.mindstick.com/forum/12937/how-to-style-togglebutton-so-that-the-background-color-is-white) from red to yellow to green as you scroll down the screen, and then vice versa **Also, Read:** [How to fetch data from API using HTML Fetch API](https://www.mindstick.com/articles/336072/how-to-fetch-data-from-api-using-html-fetch-api) --- Original Source: https://www.mindstick.com/blog/304341/explain-css-animation-with-an-example Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.