Ana Tudor 🐯<p>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. 😼</p><p>Here's a detailed explanation of the how behind <a href="https://www.reddit.com/r/css/comments/1jyu76v/comment/mn2fibt/" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">reddit.com/r/css/comments/1jyu</span><span class="invisible">76v/comment/mn2fibt/</span></a></p><p>Live on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/dPPbmao" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/dPP</span><span class="invisible">bmao</span></a></p><p>Also uses container queries, CSS trigonometric functions.</p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scroll</span></a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssAnimation</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scrollAnimation</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssVariables</span></a> <a href="https://mastodon.social/tags/cssTransform" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssTransform</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/cssMaths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssMaths</span></a> <a href="https://mastodon.social/tags/trigonometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>trigonometry</span></a></p>
veganism.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
Veganism Social is a welcoming space on the internet for vegans to connect and engage with the broader decentralized social media community.
Administered by:
Server stats:
208active users
veganism.social: About · Status · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.4.0-alpha.4
#cssanimation
0 posts · 0 participants · 0 posts today
syuzhet<p>The hues darken waveringly, like vision when eyelids inch together before sleep. Then, searing bright flashes. Their gaze connected with mine. Their mirthful eyelids framed entreating green irises. They held eye contact, innervating my body, skin to bone. <a href="https://mastodon.social/tags/poem" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>poem</span></a> <a href="https://mastodon.social/tags/love" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>love</span></a> <a href="https://mastodon.social/tags/passion" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>passion</span></a> <a href="https://mastodon.social/tags/cssanimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssanimation</span></a></p>
Ana Tudor 🐯<p>Saw a <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> demo using... a lot! of elements (screen 1) and quite a bit of <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> 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): <a href="https://codepen.io/thebabydino/pen/PwoLJLR" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Pwo</span><span class="invisible">LJLR</span></a></p><p><a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssMask</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/conicGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>conicGradient</span></a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>maths</span></a> <a href="https://mastodon.social/tags/trigonometry" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>trigonometry</span></a> <a href="https://mastodon.social/tags/Sass" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Sass</span></a> <a href="https://mastodon.social/tags/loader" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>loader</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssAnimation</span></a></p>
Ana Tudor 🐯<p>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.</p><p>Live on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/XJWxLWV" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XJW</span><span class="invisible">xLWV</span></a></p><p>cc <span class="h-card" translate="no"><a href="https://front-end.social/@bramus" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>bramus</span></a></span> </p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/scroll" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scroll</span></a> <a href="https://mastodon.social/tags/scrollAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>scrollAnimation</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssAnimation</span></a> <a href="https://mastodon.social/tags/gradientText" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>gradientText</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a></p>
Ana Tudor 🐯<p>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).</p><p>Live on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/qEBJpRb?editors=0100" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/qEB</span><span class="invisible">JpRb?editors=0100</span></a></p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/3D" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>3D</span></a> <a href="https://mastodon.social/tags/filter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>filter</span></a> <a href="https://mastodon.social/tags/cssFilter" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssFilter</span></a> <a href="https://mastodon.social/tags/animation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>animation</span></a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssAnimation</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CodePen</span></a></p>
Ana Tudor 🐯<p>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.</p><p>But what if we wanted a (semi)transparent background within the border? It's possible with pure <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a>!</p><p>Heavily commented on <span class="h-card" translate="no"><a href="https://fosstodon.org/@codepen" class="u-url mention" rel="nofollow noopener" target="_blank">@<span>codepen</span></a></span> <a href="https://codepen.io/thebabydino/pen/KwPBvzo" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/KwP</span><span class="invisible">Bvzo</span></a></p><p><a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/conicGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>conicGradient</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/webDevlopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevlopment</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssAnimation</span></a> <a href="https://mastodon.social/tags/rainbow" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>rainbow</span></a></p>
Stefan Bohacek<p>Anyone good with CSS animation interested in helping improve the Join the Fediverse website?</p><p><a href="https://github.com/jointhefediverse-net/jointhefediverse.net/issues/95" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/jointhefediverse-ne</span><span class="invisible">t/jointhefediverse.net/issues/95</span></a></p><p><a href="https://stefanbohacek.online/tags/fediverse" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>fediverse</span></a> <a href="https://stefanbohacek.online/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://stefanbohacek.online/tags/CSSAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSAnimation</span></a> <a href="https://stefanbohacek.online/tags/WebAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebAnimation</span></a> <a href="https://stefanbohacek.online/tags/webdev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webdev</span></a> <a href="https://stefanbohacek.online/tags/opensource" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>opensource</span></a> <a href="https://stefanbohacek.online/tags/HelpWanted" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>HelpWanted</span></a></p>
Ana Tudor 🐯<p>Made this loader <a href="https://codepen.io/thebabydino/pen/BayGjrq" rel="nofollow noopener" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/Bay</span><span class="invisible">Gjrq</span></a> half a decade ago. Then it only worked in Chromium browsers with the Experimental Web Platform features flag enabled.</p><p>As of 2024, it works cross-browser, no flags needed. Since someone hearting it reminded me of its existence, updated support info.</p><p><a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>webDevelopment</span></a> <a href="https://mastodon.social/tags/mask" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>mask</span></a> <a href="https://mastodon.social/tags/cssMask" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssMask</span></a> <a href="https://mastodon.social/tags/cssGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssGradient</span></a> <a href="https://mastodon.social/tags/conicGradient" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>conicGradient</span></a> <a href="https://mastodon.social/tags/cssVariables" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssVariables</span></a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssAnimation</span></a></p>
kaiserkiwi :kiwibird:<p>Hi <a href="https://corteximplant.com/tags/WebDev" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDev</span></a> bubble! </p><p>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 </p><p>Preferably without JavaScript or just as a helper to start and stop or stuff like that. </p><p>Bonus points for SVG Animation via CSS. :D </p><p><a href="https://corteximplant.com/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> <a href="https://corteximplant.com/tags/CSSAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSSAnimation</span></a> <a href="https://corteximplant.com/tags/Coding" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>Coding</span></a> <a href="https://corteximplant.com/tags/WebDevelopment" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>WebDevelopment</span></a></p>
Ana Tudor 🐯<p>Because I saw a piece of <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>CSS</span></a> used to illustrate the 1st principle of animation & almost screamed in horror...</p><p>❌ DON'T<br>.b { -webkit-animation: a 1s ease infinite alternate }</p><p>@-webkit-keyframes a {<br>0% { -webkit-transform: scaley(1.0) }<br>50% { -webkit-transform: translatey(-300%) scaley(1.2) }<br>100% { -webkit-transform: scale(1.0) }<br>}</p><p>✅ DO<br>.b { animation: a .5s ease-out infinite alternate }</p><p>@keyframes a {<br>to { transform: translatey(-300%) scale(.83, 1.2) }<br>}</p><p>Why? 👇<br><a href="https://mastodon.social/tags/tinyCodingTips" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>tinyCodingTips</span></a> <a href="https://mastodon.social/tags/cssAnimation" class="mention hashtag" rel="nofollow noopener" target="_blank">#<span>cssAnimation</span></a></p>
VegansExploreLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
Create accountLoginDrag & drop to upload