#cssanimation — Public Fediverse posts

Hi, Mastodon 🦣 - could you help me out?

If you can test in actual Safari, is this on-scroll demo glitchy there too like it is for me in Epiphany?

https://cdpn.io/pen/debug/JoKqRjZ

If you cannot test in actual Safari, boosts appreciated.

Thank you! 🙏

PS - Yes, I know it doesn't work in Firefox, it's because of this bug some rando filed a couple of years ago... https://bugzilla.mozilla.org/show_bug.cgi?id=1927325

#CSS #cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #frontend #cssAnimation #cssTransforms

Hi, Mastodon 🦣 - could you help me out?

If you can test in actual Safari, is this on-scroll demo glitchy there too like it is for me in Epiphany?

https://cdpn.io/pen/debug/JoKqRjZ

If you cannot test in actual Safari, boosts appreciated.

Thank you! 🙏

PS - Yes, I know it doesn't work in Firefox, it's because of this bug some rando filed a couple of years ago... https://bugzilla.mozilla.org/show_bug.cgi?id=1927325

#CSS #cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #frontend #cssAnimation #cssTransforms

Hi, Mastodon 🦣 - could you help me out?

If you can test in actual Safari, is this on-scroll demo glitchy there too like it is for me in Epiphany?

https://cdpn.io/pen/debug/JoKqRjZ

If you cannot test in actual Safari, boosts appreciated.

Thank you! 🙏

PS - Yes, I know it doesn't work in Firefox, it's because of this bug some rando filed a couple of years ago... https://bugzilla.mozilla.org/show_bug.cgi?id=1927325

#CSS #cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #frontend #cssAnimation #cssTransforms

Hi, Mastodon 🦣 - could you help me out?

If you can test in actual Safari, is this on-scroll demo glitchy there too like it is for me in Epiphany?

https://cdpn.io/pen/debug/JoKqRjZ

If you cannot test in actual Safari, boosts appreciated.

Thank you! 🙏

PS - Yes, I know it doesn't work in Firefox, it's because of this bug some rando filed a couple of years ago... https://bugzilla.mozilla.org/show_bug.cgi?id=1927325

#CSS #cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #frontend #cssAnimation #cssTransforms

Hi, Mastodon 🦣 - could you help me out?

If you can test in actual Safari, is this on-scroll demo glitchy there too like it is for me in Epiphany?

https://cdpn.io/pen/debug/JoKqRjZ

If you cannot test in actual Safari, boosts appreciated.

Thank you! 🙏

PS - Yes, I know it doesn't work in Firefox, it's because of this bug some rando filed a couple of years ago... https://bugzilla.mozilla.org/show_bug.cgi?id=1927325

#CSS #cssScrollAnimation #code #coding #web #dev #webDev #webDevelopment #frontend #cssAnimation #cssTransforms

https://codepen.io/alsorew/pen/dPXWmed

Hover or tap inside the blue line to discover the secret.

(You can make the animation smoother, but it would require a lot more work. Nah.)

#SteamDeck #SteamMachine #VoidLinux #CSS #PureCSS #CSSAnimation #CodePen

Noticed this got featured on @codepen: an animated XOR background - enjoy!

https://codepen.io/thebabydino/pen/JoKYVeB

Made this to answer a question from reddit https://www.reddit.com/r/css/comments/1q242on/comment/nxag5vj/?context=3

#CSS #gradient #blending #cssGradient #blendMode #xor #difference #coding #cssPattern #cssAnimation #frontend #web #dev #webDev #webDevelopment #code

Noticed this got featured on @codepen: an animated XOR background - enjoy!

https://codepen.io/thebabydino/pen/JoKYVeB

Made this to answer a question from reddit https://www.reddit.com/r/css/comments/1q242on/comment/nxag5vj/?context=3

#CSS #gradient #blending #cssGradient #blendMode #xor #difference #coding #cssPattern #cssAnimation #frontend #web #dev #webDev #webDevelopment #code

Noticed this got featured on @codepen: an animated XOR background - enjoy!

https://codepen.io/thebabydino/pen/JoKYVeB

Made this to answer a question from reddit https://www.reddit.com/r/css/comments/1q242on/comment/nxag5vj/?context=3

#CSS #gradient #blending #cssGradient #blendMode #xor #difference #coding #cssPattern #cssAnimation #frontend #web #dev #webDev #webDevelopment #code

Noticed this got featured on @codepen: an animated XOR background - enjoy!

https://codepen.io/thebabydino/pen/JoKYVeB

Made this to answer a question from reddit https://www.reddit.com/r/css/comments/1q242on/comment/nxag5vj/?context=3

#CSS #gradient #blending #cssGradient #blendMode #xor #difference #coding #cssPattern #cssAnimation #frontend #web #dev #webDev #webDevelopment #code

Noticed this got featured on @codepen: an animated XOR background - enjoy!

https://codepen.io/thebabydino/pen/JoKYVeB

Made this to answer a question from reddit https://www.reddit.com/r/css/comments/1q242on/comment/nxag5vj/?context=3

#CSS #gradient #blending #cssGradient #blendMode #xor #difference #coding #cssPattern #cssAnimation #frontend #web #dev #webDev #webDevelopment #code

One of my earliest #CSS #3D demos on @codepen: how to (de)construct a dodecahedron https://codepen.io/thebabydino/pen/ALQVQe

A dodecahedron is one of the 5 regular polyhedra = made up of only identical regular polygon faces. Regular polygons have all edge lengths and vertex angles equal.

#geometry #Maths #code #coding #css3D #cssTransforms #transform #frontend #polyhedron #polyhedra #PlatonicSolid #dodecahedron #cssAnimation #web #dev #webDev #webDevelopment #trigonometry #Sass #SCSS

One of my earliest #CSS #3D demos on @codepen: how to (de)construct a dodecahedron https://codepen.io/thebabydino/pen/ALQVQe

A dodecahedron is one of the 5 regular polyhedra = made up of only identical regular polygon faces. Regular polygons have all edge lengths and vertex angles equal.

#geometry #Maths #code #coding #css3D #cssTransforms #transform #frontend #polyhedron #polyhedra #PlatonicSolid #dodecahedron #cssAnimation #web #dev #webDev #webDevelopment #trigonometry #Sass #SCSS

One of my earliest #CSS #3D demos on @codepen: how to (de)construct a dodecahedron https://codepen.io/thebabydino/pen/ALQVQe

A dodecahedron is one of the 5 regular polyhedra = made up of only identical regular polygon faces. Regular polygons have all edge lengths and vertex angles equal.

#geometry #Maths #code #coding #css3D #cssTransforms #transform #frontend #polyhedron #polyhedra #PlatonicSolid #dodecahedron #cssAnimation #web #dev #webDev #webDevelopment #trigonometry #Sass #SCSS

One of my earliest #CSS #3D demos on @codepen: how to (de)construct a dodecahedron https://codepen.io/thebabydino/pen/ALQVQe

A dodecahedron is one of the 5 regular polyhedra = made up of only identical regular polygon faces. Regular polygons have all edge lengths and vertex angles equal.

#geometry #Maths #code #coding #css3D #cssTransforms #transform #frontend #polyhedron #polyhedra #PlatonicSolid #dodecahedron #cssAnimation #web #dev #webDev #webDevelopment #trigonometry #Sass #SCSS

Here's a little pure #CSS demo I made on @codepen a while back: clip element on #scroll https://codepen.io/thebabydino/pen/vEGBOrg

(using scroll-driven animations, so support may still be spotty)

#cssScrollAnimation #scrollAnimation #clipPath #cssClipPath #code #coding #web #dev #webDevelopment #webDev #frontend #cssAnimation #scrollEffect

Here's a little pure #CSS demo I made on @codepen a while back: clip element on #scroll https://codepen.io/thebabydino/pen/vEGBOrg

(using scroll-driven animations, so support may still be spotty)

#cssScrollAnimation #scrollAnimation #clipPath #cssClipPath #code #coding #web #dev #webDevelopment #webDev #frontend #cssAnimation #scrollEffect

Here's a little pure #CSS demo I made on @codepen a while back: clip element on #scroll https://codepen.io/thebabydino/pen/vEGBOrg

(using scroll-driven animations, so support may still be spotty)

#cssScrollAnimation #scrollAnimation #clipPath #cssClipPath #code #coding #web #dev #webDevelopment #webDev #frontend #cssAnimation #scrollEffect

Here's a little pure #CSS demo I made on @codepen a while back: clip element on #scroll https://codepen.io/thebabydino/pen/vEGBOrg

(using scroll-driven animations, so support may still be spotty)

#cssScrollAnimation #scrollAnimation #clipPath #cssClipPath #code #coding #web #dev #webDevelopment #webDev #frontend #cssAnimation #scrollEffect

Here's a little pure #CSS demo I made on @codepen a while back: clip element on #scroll https://codepen.io/thebabydino/pen/vEGBOrg

(using scroll-driven animations, so support may still be spotty)

#cssScrollAnimation #scrollAnimation #clipPath #cssClipPath #code #coding #web #dev #webDevelopment #webDev #frontend #cssAnimation #scrollEffect

#100DaysOfCode day 22:
Haven't updated thin for a few days. Not much coding, looked a little on a tutorial about #CSSAnimation, but I decided to take care of myself instead of thinking about #code and #math.

#HTML #CSS #JavaScript #WebDev

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

A fun little scroll-driven thing I made. The text is white over the image, but the image isn't static, it rotates on scroll. 😼

Here's a detailed explanation of the how behind https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/

Live on @codepen https://codepen.io/thebabydino/pen/dPPbmao

Also uses container queries, CSS trigonometric functions.

#CSS #scroll #cssAnimation #code #web #scrollAnimation #frontend #coding #dev #cssVariables #cssTransform #webDev #webDevelopment #cssMaths #trigonometry

Nice to see this ancient teaser page I put together for a conference is still pretty much working in browsers

https://thewebis.hop.ie/teaser/

#cssanimation #macplus

Saw a @codepen demo using... a lot! of elements (screen 1) and quite a bit of #CSS to create a simple loader, so I forked it and made a 1 div version (screen 2) in under 30 CSS declarations (gradients, mask, variables to only change --c0 and --c1 values for 2nd loader): https://codepen.io/thebabydino/pen/PwoLJLR

#cssMask #cssGradient #conicGradient #maths #trigonometry #Sass #loader #web #dev #webDev #webDevelopment #code #coding #frontend #cssAnimation

Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.

Live on @codepen https://codepen.io/thebabydino/pen/XJWxLWV

cc @bramus

#CSS #scroll #scrollAnimation #coding #cssAnimation #gradientText #frontend #web #dev #webDev #webDevelopment #code

Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.

Live on @codepen https://codepen.io/thebabydino/pen/XJWxLWV

cc @bramus

#CSS #scroll #scrollAnimation #coding #cssAnimation #gradientText #frontend #web #dev #webDev #webDevelopment #code

Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.

Live on @codepen https://codepen.io/thebabydino/pen/XJWxLWV

cc @bramus

#CSS #scroll #scrollAnimation #coding #cssAnimation #gradientText #frontend #web #dev #webDev #webDevelopment #code

Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.

Live on @codepen https://codepen.io/thebabydino/pen/XJWxLWV

cc @bramus

#CSS #scroll #scrollAnimation #coding #cssAnimation #gradientText #frontend #web #dev #webDev #webDevelopment #code

Here's a neat little effect with no text duplication. Uses `background-clip: text` to create the split text face effect + scroll-driven animations to tie the gradient split line position to the 1st section's bottom edge.

Live on @codepen https://codepen.io/thebabydino/pen/XJWxLWV

cc @bramus

#CSS #scroll #scrollAnimation #coding #cssAnimation #gradientText #frontend #web #dev #webDev #webDevelopment #code

Here's a simple image stack with an `--ang` rotation around an `--xy` point (both pseudo-random, generated & set inline via Pug) + a 3D entry animation (click Run to run it again).

Live on @codepen https://codepen.io/thebabydino/pen/qEBJpRb?editors=0100

#CSS #3D #filter #cssFilter #animation #cssAnimation #code #coding #frontend #web #dev #webDev #webDevelopment #CodePen

Know the animated 🌈 border + glow effect that's all the rage? It's normally done by adding an opaque cover on top of two 🌈 layers.

But what if we wanted a (semi)transparent background within the border? It's possible with pure #CSS!

Heavily commented on @codepen https://codepen.io/thebabydino/pen/KwPBvzo

#cssGradient #conicGradient #code #web #dev #webDev #webDevlopment #frontend #coding #cssAnimation #rainbow

I never thought I would be able to meddle with SVG animations, but I am finally doing it for https://ournet.rocks/weaver-kit/, and it is so cooooool!

#SVG #SVGanimation #animation #OurNet #KnittingOurInternet #WebDev #WebDesign #CSSanimation #CSS

I never thought I would be able to meddle with SVG animations, but I am finally doing it for https://ournet.rocks/weaver-kit/, and it is so cooooool!

#SVG #SVGanimation #animation #OurNet #KnittingOurInternet #WebDev #WebDesign #CSSanimation #CSS

I never thought I would be able to meddle with SVG animations, but I am finally doing it for https://ournet.rocks/weaver-kit/, and it is so cooooool!

#SVG #SVGanimation #animation #OurNet #KnittingOurInternet #WebDev #WebDesign #CSSanimation #CSS

I never thought I would be able to meddle with SVG animations, but I am finally doing it for https://ournet.rocks/weaver-kit/, and it is so cooooool!

#SVG #SVGanimation #animation #OurNet #KnittingOurInternet #WebDev #WebDesign #CSSanimation #CSS

I never thought I would be able to meddle with SVG animations, but I am finally doing it for https://ournet.rocks/weaver-kit/, and it is so cooooool!

#SVG #SVGanimation #animation #OurNet #KnittingOurInternet #WebDev #WebDesign #CSSanimation #CSS

Anyone good with CSS animation interested in helping improve the Join the Fediverse website?

https://github.com/jointhefediverse-net/jointhefediverse.net/issues/95

#fediverse #CSS #CSSAnimation #WebAnimation #webdev #opensource #HelpWanted

Made this loader https://codepen.io/thebabydino/pen/BayGjrq half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.

As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.

#CSS #code #coding #frontend #web #webDev #dev #webDevelopment #mask #cssMask #cssGradient #conicGradient #cssVariables #cssAnimation

A little pure #CSS 🌟🎄 #animation I made on @codepen a few years ago https://codepen.io/thebabydino/pen/bGwYVOm

#3D #transform #cssTransforms #code #cssAnimation #coding #frontend #xmas #web #dev #webDevlopment #webDev #tree #stars

This little thing made this week's @codepen Spark!

https://codepen.io/spark/415

#CSS #code #coding #frontend #web #dev #cssGradient #webDevelopment #webDev #glow #cssAnimation #rainbow

Because I saw someone hearted https://codepen.io/thebabydino/pen/zKLOpb I got reminded of something I need for animations like this one: to be able to use #CSS vars to compute keyframe percentages.

I have 16 columns, each with a different animation. They're different because the keyframes needs to be different depending on the index.

#cssAnimation #cssVariables #keyframes #cssTransforms #code #coding #frontend #web #webDevelopment #webDev #dev

Because I saw someone hearted https://codepen.io/thebabydino/pen/zKLOpb I got reminded of something I need for animations like this one: to be able to use #CSS vars to compute keyframe percentages.

I have 16 columns, each with a different animation. They're different because the keyframes needs to be different depending on the index.

#cssAnimation #cssVariables #keyframes #cssTransforms #code #coding #frontend #web #webDevelopment #webDev #dev

Because I saw someone hearted https://codepen.io/thebabydino/pen/zKLOpb I got reminded of something I need for animations like this one: to be able to use #CSS vars to compute keyframe percentages.

I have 16 columns, each with a different animation. They're different because the keyframes needs to be different depending on the index.

#cssAnimation #cssVariables #keyframes #cssTransforms #code #coding #frontend #web #webDevelopment #webDev #dev

Because I saw someone hearted https://codepen.io/thebabydino/pen/zKLOpb I got reminded of something I need for animations like this one: to be able to use #CSS vars to compute keyframe percentages.

I have 16 columns, each with a different animation. They're different because the keyframes needs to be different depending on the index.

#cssAnimation #cssVariables #keyframes #cssTransforms #code #coding #frontend #web #webDevelopment #webDev #dev

Because I saw someone hearted https://codepen.io/thebabydino/pen/zKLOpb I got reminded of something I need for animations like this one: to be able to use #CSS vars to compute keyframe percentages.

I have 16 columns, each with a different animation. They're different because the keyframes needs to be different depending on the index.

#cssAnimation #cssVariables #keyframes #cssTransforms #code #coding #frontend #web #webDevelopment #webDev #dev

Hi #WebDev bubble!

One of my team members at work wants to learn more about CSS animation. I don't have any overview what the better learning resources out there are so I would like to hear from my followers if they know anything that is state of the art. :D

Preferably without JavaScript or just as a helper to start and stop or stuff like that.

Bonus points for SVG Animation via CSS. :D

#CSS #CSSAnimation #Coding #WebDevelopment