# 90+ animation using CSS **URL:** \ **Category:** Project Showcase\ **Created:** [December 13, 2021, 7:17pm UTC](https://community.glideapps.com/t/90-animation-using-css/35918 "2021-12-13T19:17:02Z")\ **Posts on this page:** 10\ **Page:** 1
**Author:** ![Harsh\_Ganatra](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harsh_ganatra/32/35515_2.png) [@Harsh\_Ganatra](https://community.glideapps.com/u/Harsh_Ganatra)\ **Post date:** [December 13, 2021, 7:17pm UTC](https://community.glideapps.com/t/90-animation-using-css/35918/1 "2021-12-13T19:17:02Z")
Hey guys I’ve been working on these animations for a while, finally get to showcase them. There are 90+ animations for all purposes using CSS. Hope y’all can have some fun with it. You can copy the code from the app. > **[Animations](https://css-animations.glideapp.io/)** > > We bring you a collection of CSS Animations for all your purposes.\\nThis gives you access to 90+ animations to do with your elements using rich text. Cheers Joint work with @ShantanuIyengar 👍 ---
**Author:** ![L.M](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/l.m/32/46371_2.png) [@L.M](https://community.glideapps.com/u/L.M)\ **Post date:** [December 13, 2021, 7:29pm UTC](https://community.glideapps.com/t/90-animation-using-css/35918/2 "2021-12-13T19:29:48Z")
Thk u both w/ @ShantanuIyengar 🐈😄 I haven’t seen everything but it’s so funny as bonus 💜🧸🌸 almost a Tex Avery (ok, you’re too young to know Tex Avery cartoons!) I can certainly use this. Good idea too to show numbers as menu, like elevator floor numbers… Enjoy your Glide! ---
**Author:** ![Adam\_Crossley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adam_crossley/32/24083_2.png) [@Adam\_Crossley](https://community.glideapps.com/u/Adam_Crossley)\ **Post date:** [April 9, 2022, 6:46pm UTC](https://community.glideapps.com/t/90-animation-using-css/35918/3 "2022-04-09T18:46:07Z")
Wohoa! This is so powerful! @Harsh_Ganatra how would I go about running the animation only once? For example the fade-ins I might only want triggering into visibility once instead of that looping. Thanks for this amazing library! EDIT: answered my own question by just removing the word infinite… 🙈 ---
**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\ **Post date:** [April 9, 2022, 7:14pm UTC](https://community.glideapps.com/t/90-animation-using-css/35918/4 "2022-04-09T19:14:43Z")
Fun! ---
**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\ **Post date:** [April 9, 2022, 8:21pm UTC](https://community.glideapps.com/t/90-animation-using-css/35918/5 "2022-04-09T20:21:32Z")
I can’t believe, is so simple!!! Biggest THANKS!!! Your are awesomes!!! ---
**Author:** ![Adam\_Crossley](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/adam_crossley/32/24083_2.png) [@Adam\_Crossley](https://community.glideapps.com/u/Adam_Crossley)\ **Post date:** [April 9, 2022, 10:09pm UTC](https://community.glideapps.com/t/90-animation-using-css/35918/6 "2022-04-09T22:09:54Z")
Is it possible to apply these animations to buttons, and other components? ---
**Author:** ![Harsh\_Ganatra](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/harsh_ganatra/32/35515_2.png) [@Harsh\_Ganatra](https://community.glideapps.com/u/Harsh_Ganatra)\ **Post date:** [April 9, 2022, 10:17pm UTC](https://community.glideapps.com/t/90-animation-using-css/35918/7 "2022-04-09T22:17:28Z")
I broke glide, when i tried to do that 😂 ---
**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\ **Post date:** [April 9, 2022, 10:21pm UTC](https://community.glideapps.com/t/90-animation-using-css/35918/8 "2022-04-09T22:21:17Z")
I haven’t seen this before but it is so funny and creative, you deserve a 🍕 … no doubt! Saludos @Harsh_Ganatra ---
**Author:** ![Natanel\_Goldfeather](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/natanel_goldfeather/32/76137_2.png) [@Natanel\_Goldfeather](https://community.glideapps.com/u/Natanel_Goldfeather)\ **Post date:** [July 24, 2024, 6:05am UTC](https://community.glideapps.com/t/90-animation-using-css/35918/9 "2024-07-24T06:05:16Z")
Can someone help me understand how to use the fadeout animation only when I want to hide a component? For example I have a container that is only visible when a boolean column is checked, when setting the fadeout animation for it, it is fading out when the container appears after checking the boolean, and not when unchecking it. thank you! ---
**Author:** ![Eric\_Penn](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/eric_penn/32/73888_2.png) [@Eric\_Penn](https://community.glideapps.com/u/Eric_Penn)\ **Post date:** [July 24, 2024, 1:06pm UTC](https://community.glideapps.com/t/90-animation-using-css/35918/10 "2024-07-24T13:06:39Z")
This is a pretty old thread so understand that CSS works differently now. Maybe you could have two components… one with the class name and one without. Let the boolean control the visibility of the two components. Another way is to create your own elements using HTML and the rich text component and then dynamically add and remove the class names inside the HTML instead of using the class name on the component level.