Animation in CSS - CSS3 Animation

Zia

2 Followers

Follow

Jun 22, 2024

-

0 sec read

460

0

0

0

CSS3 animations can animate transitions from one CSS style configuration to another. The two components of animation are as follows:

• An animation style describes the animation.
• Keyframes define the initial and final states of a CSS animation, along with any intermediate waypoints that may be included.
  
  

The three advantages of CSS3 animations over script-based animation techniques are as follows:

• Easy to use and anybody can create them without knowledge of JavaScript.
• Executes well even under reasonable system loads. As simple animations perform poorly in JavaScript, the rendering engine uses frame-skipping techniques to allow smooth animation flow.
• Allows the browser to control the animation sequence, and optimize performance and efficiency by reducing the update frequency of animations executed in tabs that aren't visible.
  
  

Configuring the animation.

A CSS animation sequence can be created by styling the element with the animation property. This property allows you to set the timing, duration, and order of the animation. The @keyframes rule defines the appearance of animation. The keyframe is used to describe the rendering of the element in the animation sequence.

Lists the @keyframes rule and all the animation properties.

• @keyframes: Is used for specifying the animation
  
  
• animation: The animation shorthand property is used to configure multiple aspects of animation in CSS, covering all animation properties except for animation-play-state.
  
  
• animation-name: This is used for specifying the name of the @keyframes animation
  
  
• animation-duration: The animation-duration property is used to specify the length of time an animation cycle takes to complete, measured in seconds or milliseconds. The default value is 0
  
  
• animation-timing-function: This is used for describing the progress of animation over one cycle of its duration. The default value is 'ease'
  
  
• animation-delay: This is used for specifying the start value of animation. The default value is 0
  
  
• animation-iteration-Count: This is used for specifying the number of times an animation is played. The default value is 1
  
  
• animation-direction: This is used for specifying whether or not the animation should play in reverse on alternate cycles. The default value is 'normal'.
  
  
• animation-play-state: This is used for specifying the state of the animation, that is whether it is running or paused. The default value is 'running'
  
  

The syntax for @keyframes is as follows: