Thread by @Vanshsh2701

13/7/2021 🧵

📌📌CSS Animation📌📌

CSS allows animation of HTML elements without using JavaScript or Flash!

1⃣ animation-name: The animation-name property specifies a name for the keyframes animation.

2⃣ animation-duration: The animation-duration property defines how long an animation should take to complete one cycle.

Note: Always specify the animation-duration property, otherwise the duration is 0, and will never be played.

3⃣ animation-timing-function: The animation-timing function specifies the speed curve of an animation.

Values: linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end |steps (int,start|end) | cubic-bezier(n,n,n,n) | initial | inherit;

4⃣animation-delay: The animation-delay property specifies a delay for the start of an animation.

5⃣ animation-iteration-count: The animation-iteration-count property specifies the number of times an animation should be played.

NOTE: You can also use "infinite".

6⃣ animation-direction: The animation-direction property defines whether an animation should be played forwards, backward, or in alternate cycles.

Values: normal | reverse | alternate | alternate-reverse

7⃣ animation-fill-mode: The animation-fill-mode property specifies a style for the element when the animation is not playing (before it starts, after it ends, or both).

Values: none | forwards | backwards | both

8⃣ animation-play-state: The animation-play-state property specifies whether the animation is running or paused

Values: paused | running

9⃣ Shorthand for the animation:

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

If you enjoyed reading this:

- please RETWEET/LIKE the first tweet
- For more threads like this Follow @Vanshsh2701

Thankyou👍🤟😊