CSS Help To animate a sliding door

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?

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

2 Likes

This is my CSS. It does not animate :confused: 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 :slightly_smiling_face::cherry_blossom:

<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)

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

<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; }
}
>
3 Likes

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

2 Likes

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

1 Like

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":grin:. 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 陳湘梅 :cherry_blossom:and sounds like a famous diplomat & writer in China.
Mei means Tenacity… Or “Sleepy Dragon” (a species of extinct dinausor)
|462px;x311px;
And it does not even look like a dragon :smile:
So Tenacity is my second name. As well as Sleepy Dragon. Literally.

Join this community because I like to learn new things.

You're at the very right place :-)
1 Like

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

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

1 Like

And very smiling


people



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.

2 Likes

Beautiful name: Chen xiang mei. :heart_eyes_cat:

Yeah, Daddy is very proud of it :smiling_face: 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.

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

1 Like

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”.

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

2 Likes

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🌸

1 Like

I still support you. Look in the following post.

3 Likes

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