{"id":3210,"date":"2023-09-03T09:49:49","date_gmt":"2023-09-03T09:49:49","guid":{"rendered":"https:\/\/swatilathia.com\/?page_id=3210"},"modified":"2023-09-05T04:21:32","modified_gmt":"2023-09-05T04:21:32","slug":"css-animation","status":"publish","type":"page","link":"https:\/\/swatilathia.com\/?page_id=3210","title":{"rendered":"CSS Animation"},"content":{"rendered":"\n

\n

Table of Contents<\/p>\nToggle<\/span>

What is Animation in CSS?<\/a><\/li>

Animation Properties<\/a>

Example 12: Animation (Short Hand Property)<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n

<\/span>What is Animation in CSS?<\/span><\/h1>\n\n\n\n

CSS animation is a technique which is used in web development to create dynamic and visually appealing effects on a webpage without the need for complex JavaScript code or external plugins.<\/li>\n\n\n\n
It allows you to animate the properties of HTML elements, such as their position, size, color, and opacity, by defining keyframes and transitions using Cascading Style Sheets (CSS).<\/li>\n\n\n\n
Keyframes<\/strong>: Keyframes are the foundation of CSS animations. They define the starting and ending points of an animation along with any intermediate stages. Keyframes are defined using the @keyframes rule and specify the percentage of the animation\u2019s progress (from 0% to 100%) at which certain styles should be applied.<\/li>\n\n\n\n
If you define CSS styles within the @keyframes rule, the animation will smoothly transition from its current style to the specified new style at specific points in time.<\/li>\n\n\n\n
Throughout the animation, it\u2019s possible to modify the CSS styles multiple times.<\/li>\n\n\n\n
It indicates the timing of style changes either as a percentage or by using the terms \u2018from\u2019 and \u2018to,\u2019 which are equivalent to 0% and 100%. At 0%, the animation starts, and at 100%, it concludes.<\/li>\n\n\n\n

Syntax<\/strong><\/li>\n<\/ul>\n\n\n\n
@keyframes animationname {keyframes-selector {css-styles;}}<\/code><\/code><\/pre>\n\n\n\n\nHere, animationame indicates name of animation.<\/li>\n\n\n\n Keyframes-selector indicates percentage of animation duration. Values may be (0 \u2013 100%) or From (same as 0) to To (same as 100).<\/li>\n\n\n\n CSS-styles indicates one or more CSS style properties.<\/li>\n\n\n\n To apply an animation to an element, you use following CSS properties:<\/li>\n<\/ul>\n\n\n\n<\/span>Animation Properties<\/span><\/h1>\n\n\n\n\nanimation-name<\/strong>: It specifies the name of the keyframes animation.<\/li>\n<\/ul>\n\n\n\n\nanimation-duration:<\/strong>\u00a0It sets the duration of the animation in seconds or milliseconds. If this property is not specified, then no animation will occur as its default value if 0s (zero second).<\/li>\n<\/ul>\n\n\n\n\nanimation-timing-function:<\/strong> It\u00a0defines the acceleration and deceleration of the animation. It essentially determines how an animated property changes values as time passes. The values of this property are:<\/li>\n<\/ul>\n\n\n\n\nease<\/strong>: This is the default timing function and creates a smooth, gradual acceleration and deceleration. It starts slow, speeds up in the middle, and slows down again at the end of the animation.<\/li>\n\n\n\n linear<\/strong>: This option produces a constant speed animation. It changes properties at a constant rate throughout the animation.<\/li>\n\n\n\n ease-in<\/strong>: It starts slow and then accelerates, creating a quick finish.<\/li>\n\n\n\n ease-out<\/strong>: It starts fast and then decelerates, creating a slow finish.<\/li>\n\n\n\n ease-in-out<\/strong>: This timing function combines both easing in and easing out, creating a moderate acceleration and deceleration effect.<\/li>\n<\/ol>\n\n\n\n\nanimation-delay:<\/strong>\u00a0It specifies a delay before the animation starts.<\/li>\n<\/ul>\n\n\n\n\nanimation-iteration-count:<\/strong> It determines how many times the animation should repeat. The value can be either any number, like 1, 2, 3 or \u201cinfinite\u201d to repeat animation indefinitely.<\/li>\n<\/ul>\n\n\n\n\nanimation-direction:<\/strong>\u00a0It sets whether the animation should play forward, backward, or alternate. This property can take the following values:\n\nnormal<\/strong> (default): The animation plays forward from the start to the end and then restarts from the beginning. This is the default behavior.<\/li>\n\n\n\n reverse<\/strong>: The animation plays backward from the end to the start and then restarts from the end.<\/li>\n\n\n\n alternate<\/strong>: The animation alternates between playing forward and backward. It starts by playing forward, then plays backward, and so on.<\/li>\n\n\n\n alternate-reverse<\/strong>: Similar to \u201calternate,\u201d but it starts by playing backward, then plays forward, and repeats in that pattern.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n\nanimation-fill-mode: <\/strong>This property determines how the styles of an element are applied before and after the animation is executed. It specifies how the element should behave during the periods before and after the animation runs, which are typically referred to as the \u201canimation\u2019s fill modes.\u201d There are four possible values for the property:\n\nnone: <\/strong>This is the default value. It means that the element\u2019s styles are not affected by the animation before or after it runs. The element will immediately switch back to its original styles once the animation completes.<\/li>\n\n\n\n forwards:<\/strong> In this mode, the element retains the computed values of the animation\u2019s final keyframe (the keyframe with a 100% progress) after the animation finishes. This means that the element will stay in its animated state even after the animation has completed.<\/li>\n\n\n\n backwards:<\/strong> In this mode, the element applies the styles of the animation\u2019s initial keyframe (the keyframe with a 0% progress) before the animation starts. This ensures that the element is in the correct starting state before the animation begins.<\/li>\n\n\n\n both:<\/strong> This mode combines the behavior of both forwards<\/strong> and backwards.<\/strong> It applies the styles of the initial keyframe before the animation starts and retains the styles of the final keyframe after it completes.<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n\n\n\n\nanimation-play-state<\/strong>: This property specifies whether the animation is running<\/strong> or paused<\/strong>.<\/li>\n<\/ul>\n\n\n\n\nanimation: <\/strong>This is shorthand property to set all the animation properties.<\/li>\n\n\n\n To understand all these properties, let us take one by one example of each property.<\/li>\n<\/ul>\n\n\n\n\nLet us start with simple example to animate <div> element. The animation will last for 5 seconds, and it will gradually change the background-color of the <div> element from \u201cpink\u201d to \u201cpurple\u201d.<\/li>\n<\/ul>\n\n\n\n<\/span>Example 1: animation-name and keyframes (from \u2013 to)<\/span><\/h2>\n\n\n\n<!DOCTYPE html>\n<html>\n\t<head>\n\t\t<style> \n\t\t\t#d_ex1\n\t\t\t{\n\t\t\t\twidth:200px;\n\t\t\t\theight:200px;\n\t\t\t\tbackground-color:pink;\n\t\t\t\tanimation-name:ex1;\n\t\t\t\tanimation-duration:5s;\n\t\t\t}\n\t\t\t@keyframes ex1 \n\t\t\t{\n\t\t\t\tfrom \n\t\t\t\t{\n\t\t\t\t\tbackground-color:pink;\n\t\t\t\t}\n\t\t\t\tto \n\t\t\t\t{\n\t\t\t\t\tbackground-color:purple;\n\t\t\t\t}\n\t\t\t}\n\t\t<\/style>\n\t<\/head>\n\t<body>\n\n <b>This animation takes 5 seconds to complete<\/b><br>\n\t\t<div id='d_ex1'><\/div>\n\t\t<B>When an animation is completed, \n\t\tit goes back to its original style\/color.<\/B>\n\t\t<\/body>\n<\/html><\/code><\/pre>\n\n\n\nOutput<\/strong><\/p>\n\n\n\n\n\n\t\n\t\t