https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔵" title="Blauer Kreis" aria-label="Emoji: Blauer Kreis"> CSS Animation Overview https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔵" title="Blauer Kreis" aria-label="Emoji: Blauer Kreis">

CSS Animations make animating web UI elements simple. You can achieve many animations without needing any JS or external packages and can be done straight away with vanilla CSS.

Let& #39;s break down CSS animations. https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread"> 1/14
https://abs.twimg.com/emoji/v2/... draggable= CSS Animation Overview https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔵" title="Blauer Kreis" aria-label="Emoji: Blauer Kreis"> CSS Animations make animating web UI elements simple. You can achieve many animations without needing any JS or external packages and can be done straight away with vanilla CSS.Let& #39;s break down CSS animations. https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread"> 1/14" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔵" title="Blauer Kreis" aria-label="Emoji: Blauer Kreis"> CSS Animation Overview https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔵" title="Blauer Kreis" aria-label="Emoji: Blauer Kreis"> CSS Animations make animating web UI elements simple. You can achieve many animations without needing any JS or external packages and can be done straight away with vanilla CSS.Let& #39;s break down CSS animations. https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇" title="Rückhand Zeigefinger nach unten" aria-label="Emoji: Rückhand Zeigefinger nach unten"> https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread"> 1/14" class="img-responsive" style="max-width:100%;"/>
https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2"> Applying to an element

Once we have our animation defined we can apply it to an element in one of two ways:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="👉" title="Rückhand Zeigefinger nach rechts" aria-label="Emoji: Rückhand Zeigefinger nach rechts"> animation-name
https://abs.twimg.com/emoji/v2/... draggable="false" alt="👉" title="Rückhand Zeigefinger nach rechts" aria-label="Emoji: Rückhand Zeigefinger nach rechts"> animation shorthand syntax

We& #39;ll come back to the shorthand syntax later, first let& #39;s look at all the properties.

3/14
https://abs.twimg.com/emoji/v2/... draggable= Applying to an elementOnce we have our animation defined we can apply it to an element in one of two ways:https://abs.twimg.com/emoji/v2/... draggable="false" alt="👉" title="Rückhand Zeigefinger nach rechts" aria-label="Emoji: Rückhand Zeigefinger nach rechts"> animation-namehttps://abs.twimg.com/emoji/v2/... draggable="false" alt="👉" title="Rückhand Zeigefinger nach rechts" aria-label="Emoji: Rückhand Zeigefinger nach rechts"> animation shorthand syntaxWe& #39;ll come back to the shorthand syntax later, first let& #39;s look at all the properties.3/14" title="https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2"> Applying to an elementOnce we have our animation defined we can apply it to an element in one of two ways:https://abs.twimg.com/emoji/v2/... draggable="false" alt="👉" title="Rückhand Zeigefinger nach rechts" aria-label="Emoji: Rückhand Zeigefinger nach rechts"> animation-namehttps://abs.twimg.com/emoji/v2/... draggable="false" alt="👉" title="Rückhand Zeigefinger nach rechts" aria-label="Emoji: Rückhand Zeigefinger nach rechts"> animation shorthand syntaxWe& #39;ll come back to the shorthand syntax later, first let& #39;s look at all the properties.3/14" class="img-responsive" style="max-width:100%;"/>
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> animation-name

This property declares the name of keyframe we are going to apply to the element.

See the previous tweet for an example.

Read More:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> https://developer.mozilla.org/en-US/docs/Web/CSS/animation-name

4/14">https://developer.mozilla.org/en-US/doc...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> animation-duration

This property declares the length of time in either seconds or milliseconds to complete one cycle of the animation.

E.G.

animation-duration: 500ms;
animation-duration: 5s;

Read more:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> https://developer.mozilla.org/en-US/docs/Web/CSS/animation-duration

5/14">https://developer.mozilla.org/en-US/doc...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> animation-timing-function

This property establishes the acceleration curve for the animation to use.

E.G.

animation-timing-function: ease-in;
animation-timing-function: linear;

See a full list:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function

6/14">https://developer.mozilla.org/en-US/doc...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> animation-delay

As the name suggests this property allows you to add delay to the start of the animation.

By default, animations will start immediately but this property allows you to change that.

E.G.

animation-delay: 1s;

Read More:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

7/14">https://developer.mozilla.org/en-US/doc...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> animation-direction

Allows you to state if the animation will play in reverse, normally or change on each run (alternate).

E.G.

animation-direction: alternate;

Read More:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction

8/14">https://developer.mozilla.org/en-US/doc...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> animation-iteration-count

This property allows you to specify how many times the animation should run or can be infinite if you don& #39;t want it to stop.

E.G.

animation-iteration-count: infinite;
animation-iteration-count: 5;

Read More:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> https://developer.mozilla.org/en-US/docs/Web/CSS/animation-iteration-count

9/14">https://developer.mozilla.org/en-US/doc...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> animation-fill-mode

This property controls the styles that apply to the element after the animation is finished.

If you animate an element to grow this controls if it stays grown after or not.

E.G.

animation-fill-mode: both;

Read More:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

10/14">https://developer.mozilla.org/en-US/doc...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> animation-play-state

Controls the current play status of the animation. Can be toggled between play and pause.

E.G.

animation-play-state: running;
animation-play-state: paused;

Read More:

https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔗" title="Link Symbol" aria-label="Emoji: Link Symbol"> https://developer.mozilla.org/en-US/docs/Web/CSS/animation-play-state

11/14">https://developer.mozilla.org/en-US/doc...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="⭐" title="Mittelgroßer Stern" aria-label="Emoji: Mittelgroßer Stern"> animation shorthand

Animation shorthand syntax can control all of the above properties in one.

E.G.

animation: 3s ease-in 1s infinite reverse both running <NAME>;

or

duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name

12/14
https://abs.twimg.com/emoji/v2/... draggable="false" alt="4️⃣" title="Tastenkappe Ziffer 4" aria-label="Emoji: Tastenkappe Ziffer 4"> Helpful Resources

Below are 2 resources that are extremely helpful for understanding animations and it& #39;s properties.

The CSS Tricks Article also contains a good CodePen you can play around on.

CSS Tricks Article: https://css-tricks.com/almanac/properties/a/animation/

MDN:">https://css-tricks.com/almanac/p... https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

13/14">https://developer.mozilla.org/en-US/doc...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="❓" title="Rotes Fragezeichen-Symbol" aria-label="Emoji: Rotes Fragezeichen-Symbol"> Found this helpful?

If you found this thread on CSS Animations helpful, please consider liking and re-tweeting it so others can find it helpful too.

If you would like to see more content like this on your timeline please make sure to follow me. https://abs.twimg.com/emoji/v2/... draggable="false" alt="😄" title="Lächelndes Gesicht mit geöffnetem Mund und lächelnden Augen" aria-label="Emoji: Lächelndes Gesicht mit geöffnetem Mund und lächelnden Augen">

14/14
You can follow @MrConerMurphy.
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.

Latest Threads Unrolled: