# CSS Help To animate a sliding door

**URL:** <https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190>\
**Category:** Ask for Help\
**Created:** [October 17, 2021, 1:52pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190 "2021-10-17T13:52:18Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**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:** [October 17, 2021, 1:52pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/1 "2021-10-17T13:52:18Z")

</div>

Hi, yeah, I’ve got this crazy idea to make my entry door slide and vanish softly and smoothly

Here’s what I’ve found.  
I want to go from my current static door  
Animate the element “webkit-overflow-scrolling”, if I’m not mistaken  
To integrate the effect shown in the video  
How should the CSS be in my Glide Rich Text?

 ![Door](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/f/7fcf9933ad5a4d551434f9cc6eb636ca5abfbfe5.png)

Thks 🌸  
_“Though this be **madness,** yet there is **method** in’t.”_ ― William Shakespeare, Hamlet.

---

<div class="post-metadata">

**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:** [October 30, 2021, 11:26am UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/2 "2021-10-30T11:26:19Z")

</div>

This is my CSS. It does not animate 😕 I’d like to slide it from right to left with dissolve, as in the w3schools Tryit Editor. I’ll adjust the width when I’ll see the result.

Can so help if it’s doable? @Himaladin ? @ThinhDinh ? Thks 🙂🌸

```auto
<div style =" position: fixed;
animation: slidedissolve 3s;
animation-fill-mode: forwards;
top: 35px; 
width: 99%;
height: 93%;
left: 3%;
max-width: 680px;
opacity: 30;
margin-left: -10px;
background-color: rgba(143, 96, 114, 0.14); 
backdrop-filter: blur(10px);
border-radius: 16px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: 0 4px 30px pink;
rgba(0, 0, 0, 0.1);
text-align: center;
z-index:-1 !important;"
border: 1px solid rgba(143, 96, 114, 1);
}
@keyframes slidedissolve {
  from {left: 0px;}
  to {left: -200px; background-color: transparent;}
}
>

```

I’m also not sure my CSS is “clean”, especially those quotes div style =quote that weirdly ends with !important;" instead of further (and if I try to change, patatrac! oups! the colored div disappears)

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 30, 2021, 1:08pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/3 "2021-10-30T13:08:38Z")

</div>

You can try adding `<pre><span><style>` before @keyframe, maybe. 😄  
Sorry, it takes a lot of effort to understand English. @L.M

```auto
<div style =" position: fixed;
animation: slidedissolve 3s;
animation-fill-mode: forwards;
top: 35px; 
width: 99%;
height: 93%;
left: 3%;
max-width: 680px;
opacity: 30;
margin-left: -10px;
background-color: rgba(143, 96, 114, 0.3); 
backdrop-filter: blur(10px);
border-radius: 16px;
padding-top: 1%;
padding-left: 7%;
padding-right: 7%;
box-shadow: 0 4px 30px pink;
rgba(0, 0, 0, 0.1);
text-align: center;
z-index:-1 !important;"
border: 1px solid rgba(143, 96, 114, 1);
}
<pre><span><style>
@keyframes slidedissolve {
  from {left: 0px; opacity:1;}
  to {left: -400px; opacity:0.1; }
}
>

```

---

<div class="post-metadata">

**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:** [October 30, 2021, 4:40pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/4 "2021-10-30T16:40:38Z")

</div>

What is / are your favorite language.s?  
Don’t worry! I try to ask, even no answer is a kind of answer 🙂. I can manage that.  
Sometimes we get lucky…

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 30, 2021, 5:00pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/5 "2021-10-30T17:00:54Z")

</div>

I’m Indonesian, @L.M 麗美女士. Is this really your name? Join this community because I like to learn new things.

---

<div class="post-metadata">

**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:** [October 30, 2021, 5:10pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/6 "2021-10-30T17:10:45Z")

</div>

Indonesian. Ok. I went to Bali during your Nyepi I think (no working allowed, curtains closed, etc) Spring 1998. Love Bali. Still have my hat and silk belts and all my dresses with those beautiful batik. Unique.  
No, pls, my name is not “Beautiful” nor "Full Beauty"😁. When I was a little girl, my nickname was Snow White, because Chinese people worship “white” skin. But that’s all. Yes, my name is Ly-Mei. But it does not mean anything in French. The original name is more true to my father’s literate level 陳湘梅 🌸and sounds like a famous diplomat & writer in China.  
Mei means Tenacity… Or “Sleepy Dragon” (a species of extinct dinausor)  
 **![|462px;x311px;](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/4/c46b76a1b2f56f69bf1afcd1cadbf5fd6b16b2f8.png)**  
And it does not even look like a dragon 😄  
So Tenacity is my second name. As well as Sleepy Dragon. Literally.

> Join this community because I like to learn new things.

```auto
You're at the very right place :-)
```

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 30, 2021, 5:23pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/7 "2021-10-30T17:23:45Z")

</div>

What we are talking about here can appear in Google search. Beautiful name: Chen xiang mei. 😻

Bali is indeed very interesting in terms of its natural beauty and culture (Hinduism).  
You should not be bored if you are there.

---

<div class="post-metadata">

**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:** [October 30, 2021, 5:30pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/8 "2021-10-30T17:30:12Z")

</div>

And very smiling

 ![948325_14HContraste](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/7/8/78d2d904471396510d855e146f44c2f1036cb0b8.jpeg)  
people  
 ![BainPurificationContrasteDT (Copier)](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/a/9a9b2384987f135b0498f43d4cab9748809345f8.jpeg)  
 ![963634_13HContraste](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/e/ceb6ac50a98599e2538017f92169e71256e610f6.jpeg)  
 ![963634_15HContraste](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/a/fa0614232d7f667202c6fa10be7a6ed905dab586.jpeg)  
The fisherman seems to stand on the water…  
People took the purification bath the morning after Nyepi.  
Sorry, my pictures are scans, so crappy resolution, I didn’t have digital camera at that time. And of course nor smartphone either.

---

<div class="post-metadata">

**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:** [October 30, 2021, 5:39pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/9 "2021-10-30T17:39:09Z")

</div>

> Beautiful name: Chen xiang mei. 😻

Yeah, Daddy is very proud of it ☺ and whenever I pass the airport customs in Chinese speaking countries, people just stop when reading my passport and tell me I have a very famous name.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 30, 2021, 5:43pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/10 "2021-10-30T17:43:26Z")

</div>

Have you tried the CSS above? I hope I didn’t misread your meaning

---

<div class="post-metadata">

**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:** [October 30, 2021, 5:48pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/11 "2021-10-30T17:48:13Z")

</div>

Not yet. I had trouble repeating the successful Eclipse from my test app to my production app until I can show case it (it should have taken minutes, well, more than 1 hour to figure out why on Earth it didn’t do anything). Oddly enough, it didn’t want to work on the right tab. I had to try on another test tab and switch it. Very strange. I copied exactly the same CSS with all components in the exact order. The danger of being newbies in this. No guarantee. And no way to explain how to correct. Just “instinct”.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 30, 2021, 5:57pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/12 "2021-10-30T17:57:52Z")

</div>

Then it will be continued tomorrow. Oh no, now at my place the day has changed 🙃. I’ll take a break first.  
See you again.

---

<div class="post-metadata">

**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:** [October 31, 2021, 10:34am UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/13 "2021-10-31T10:34:02Z")

</div>

Yes! I couldn’t help give it a try yesternight: I haven’t noticed you included the full code.  
Still under close tests, but, there’s hope!  
I’ll resume later. That’s enough Glide “test & bet” for this week-end.  
Thks so much for your help🌸

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [October 31, 2021, 1:41pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/14 "2021-10-31T13:41:15Z")

</div>

I still support you. Look in the following post.

> [@Open Sesame! My 1st Trial to open a Glassmorph & Eclipse Door](https://community.glideapps.com/t/open-sesame-my-1st-trial-to-open-a-glassmorph-eclipse-door/33797):
>
> Hi cherry_blossom Thks to @Himaladin especially, looks like I’m on the right track to open that door. It’s still not working at 100 %, as if the requested tab cannot come front. So you’re seing my lab app with its mess. But, nevertheless, I’ve never been so close to open a door. If I may express it “wordsmithly and wordsmoothly” (I hope my non-native English attempt to play-on-words does not harm your eyes). I’d like to suggest a “spirit of” a glassmorph sliding door that dissolves in the da…

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [November 1, 2021, 1:42pm UTC](https://community.glideapps.com/t/css-help-to-animate-a-sliding-door/33190/15 "2021-11-01T13:42:05Z")

</div>

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.