up/down animation

Jun 16, 2022 4:50 AM

CSScomic

Views

6579

Likes

31

Dislikes

4

Inspired by an animation I saw earlier on imgur (or maybe on Twitter?), I coded this small animation with HTML + CSS.

looping_gif

web_development

animation

html

css

3 years ago | Likes 1 Dislikes 0

You mean no JavaScript involved?

3 years ago | Likes 1 Dislikes 0

No need for this, css transformation and animation with keyframes are very powerful.

3 years ago | Likes 4 Dislikes 0

Oh wow i didn’t know thanks!

3 years ago | Likes 1 Dislikes 0

Doable with a single element and just rotate/translate

3 years ago | Likes 1 Dislikes 0

I tried with a single element and failed. The least I can do is two elements and drop-shadow https://codepen.io/alvaromontoro/pen/vYdPNPM

3 years ago | Likes 2 Dislikes 0

I made a pen to show/hide/rotate/translate pseudo els for up/down using keyframes, works until the dn to down part, ignore my silly comment

3 years ago | Likes 1 Dislikes 0