search

animate-css / animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
https://animate.style/
Other
80.64k stars 16.23k forks source link

backdrop-blur is not working when is backin #1658

Closed ArisuSuzushima closed 1 year ago

ArisuSuzushima commented 1 year ago

Describe The Bug

#author_info{
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    height: 500px;
    width: 300px;
    position: fixed;
    left: 5%;
    padding: 10px;
    top: calc(50% - 250px);
    border-radius: 5px;
    color: #fff;
    font-family: Roboto;
}

when is fadein,the backdrop-blur is not working

Steps To Reproduce

No response

Expected Behavior

No response

Screenshots

No response

Desktop

OS: Microsoft Windows 10 Browser:Chrome110

Smartphone

No response

Additional Context

No response

warengonzaga commented 1 year ago

Can you replicate this in codepen? @CodereInc

ArisuSuzushima commented 1 year ago

https://codepen.io/CodereInc/pen/RwYKzey

shiv-0101 commented 1 year ago

Seems to be working fine...

dejanheroxd commented 1 year ago 
Maybe when we move the css rules for #author_info below the animate.css link in the <head> section this might help give higher priority to the backdrop-blur effect

html