# A floating and swaying CSS animation

**URL:** <https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092>\
**Category:** Project Showcase\
**Created:** [March 11, 2021, 6:33am UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092 "2021-03-11T06:33:23Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![hisashi.fujita](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/hisashi.fujita/32/17088_2.png) [@hisashi.fujita](https://community.glideapps.com/u/hisashi.fujita)\
**Post date:** [March 11, 2021, 6:33am UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/1 "2021-03-11T06:33:23Z")

</div>

Is it fluffy and swaying?

> **[css-animation](https://css-animation.glideapp.io/)**

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [March 11, 2021, 7:39am UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/2 "2021-03-11T07:39:02Z")

</div>

Another great trick!

---

<div class="post-metadata">

**Author:** ![Nadir\_Abdelrahman\_MD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nadir_abdelrahman_md/32/5237_2.png) [@Nadir\_Abdelrahman\_MD](https://community.glideapps.com/u/Nadir_Abdelrahman_MD)\
**Post date:** [March 12, 2021, 9:34pm UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/3 "2021-03-12T21:34:13Z")

</div>

great work. can you share your CSS?

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [March 12, 2021, 10:24pm UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/4 "2021-03-12T22:24:53Z")

</div>

Lol, does no good in the forums if your not going to show people how to do it. That divided image is badass though 🙂 congrats on that.

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [March 12, 2021, 10:43pm UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/5 "2021-03-12T22:43:30Z")

</div>

You know…view source or inspect would reveal the CSS pretty quickly if you really wanted it.

---

<div class="post-metadata">

**Author:** ![Drearystate](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/drearystate/32/49605_2.png) [@Drearystate](https://community.glideapps.com/u/Drearystate)\
**Post date:** [March 16, 2021, 4:36pm UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/6 "2021-03-16T16:36:23Z")

</div>

Yeah, I don’t. I would just make a gif that does it then link it.

---

<div class="post-metadata">

**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:** [May 25, 2021, 1:08pm UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/7 "2021-05-25T13:08:13Z")

</div>

Could you extract that for the noobs here? When i look at the source my head spins, no clue what to look for! 😅 😅

---

<div class="post-metadata">

**Author:** ![Jeff\_Hager](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jeff_hager/32/43_2.png) [@Jeff\_Hager](https://community.glideapps.com/u/Jeff_Hager)\
**Post date:** [May 25, 2021, 3:54pm UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/8 "2021-05-25T15:54:46Z")

</div>

In Chrome, if you right click on the image and do an ‘Inspect’, it will take you to the image in the source. Looking at it quickly, it looks like the CSS was injected just after the image. Just look within the style tag. Usually if you dig around a little bit, you can find the CSS styles. I’m guessing everything within the style tag is what you are looking for. Depending on where the rich text component is placed, could be anywhere in the source, but looks to be right after the image in this case.

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/2/d/2d1b9c5be21505fcf4166f327f82f38729e44c68.png)

---

<div class="post-metadata">

**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:** [May 25, 2021, 4:07pm UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/9 "2021-05-25T16:07:56Z")

</div>

Teach a man to fish! thanks Jeff.

I don’t know any CSS, or coding, so I often need the fish as far as what I can paste into a rich text component. But i’ll give this a go, cheers!

---

<div class="post-metadata">

**Author:** ![Nadir\_Abdelrahman\_MD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nadir_abdelrahman_md/32/5237_2.png) [@Nadir\_Abdelrahman\_MD](https://community.glideapps.com/u/Nadir_Abdelrahman_MD)\
**Post date:** [July 27, 2021, 1:37am UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/10 "2021-07-27T01:37:08Z")

</div>

Thanks

---

<div class="post-metadata">

**Author:** ![chinna](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/chinna/32/28347_2.png) [@chinna](https://community.glideapps.com/u/chinna)\
**Post date:** [July 29, 2021, 4:58pm UTC](https://community.glideapps.com/t/a-floating-and-swaying-css-animation/24092/11 "2021-07-29T16:58:06Z")

</div>

There are a ton of fun use cases I can think of with this trick. Very awesome! Thanks for sharing!
