advertisement
Animation in CSS - CSS3 Animation
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:
advertisement
Conversation
Your input fuels progress! Share your tips or experiences on prioritizing mental wellness at work. Let's inspire change together!
Join the discussion and share your insights now!
Comments 0