#csstransition — Public Fediverse posts

So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.

So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ

cc @bramus

#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition

So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.

So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ

cc @bramus

#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition

So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.

So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ

cc @bramus

#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition

So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.

So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ

cc @bramus

#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition

So I saw a demo in the @codepen Spark and I liked the idea, but it was too JS-heavy for my taste, plus I would have preferred the rotation animations to be "hinged" around the top/ bottom edge depending on direction.

So I did it with pure #CSS on scroll https://codepen.io/thebabydino/pen/JoKqRjZ

cc @bramus

#cssScrollAnimation #scrollEffect #code #cssTransforms #cssTransform #css3D #3D #coding #frontend #cssLayout #web #dev #webDev #webDevelopment #cssGrid #cssFlex #flexbox #cssVariables #cssTransition

Someone hearted a Pen I made over a year ago, a no library, minimal JS version of another I found on @codepen.

At the time, it didn't work in Firefox as it was transitioning custom properties and support for :has() there was spotty.

Now it's cross-browser codepen.io/thebabydino/pen/gOqYdJd

#CSS #cssTransition #mask #cssMask #revealEffect #textEffects #textEffect #code #coding #frontend #webDevelopment #web #dev #webDev

#Development #Hacks
Beating ‘!important’ user agent styles (sort of) · How CSS transitions make the impossible possible https://ilo.im/15zqnb

_____
#UserAgent #Stylesheet #CssCascade #CssTransition #CssCalc #CssConstant #Browser #WebDev #Frontend #CSS