CSS keyframe animation not working on div element using opacity

Question

I have div .list element with CSS below

.list{
    bottom:0;
    height:calc(100% - 85px);
    left:50%;
    max-width:600px;
    padding-bottom:85px;
    -webkit-transform:translate(-50%,-5%);
    z-index:-1;
    display:flex;
    width:100%;
    flex-wrap:wrap;
    overflow-x:hidden;
    overflow-y:scroll;
    position:fixed;
    justify-content:center;
    opacity:0;
    background-color:#f1f1f1;
}

I use JavaScript to add .anim class to this element which contains animation to open .list div element on click open button

document.querySelector('.list').classList.add('anim');

.anim class should animate opening .list using CSS animation.

.anim {
    -webkit-animation:openlist 200ms ease forwards;
    z-index:2
}

@-webkit-keyframes openlist {
    0% {
    -webkit-transform:translate(-50%,-5%)
    }
    
    to {
    -webkit-transform:translate(-50%,0);
    opacity:1
    }
}

Problem with opacity: when I use Opacity outside CSS animation and put it inside .anim class after animation definition like below:

.anim {
    -webkit-animation:openlist 200ms ease forwards;
    z-index:2;
    opacity:1;
}

.list div is scrollable without any problem but I don't get transition effect from opacity:0 to 1.

If I use opacity inside animation like below:

to {
    -webkit-transform:translate(-50%,0);
    opacity:1
}

Everything is working fine but .list div is not scrolling and scrollbar is hidden.

HTML

<body class="x">

  <input type="search" class="s2" placeholder="Search...">
  <div class="s1"></div>

  <div class="c1"></div>
  <div class="list"></div>
  <img src="icons/heart.svg" id="m">

</body>

BODY CSS:

.x {
  width:100%;
  height:100%;
  margin:90px 0;
  overflow-x:hidden;
  overflow-y:scroll;
}

Question: How to get CSS animation working with opacity inside and keep transition effect plus .list div scrollable?

@LaaouatniAnas Thanks for your reply but i tried this way and still not working. Putting opacity:0 inside 0% {} gives same effect — redevil
– redevil, Commented Jul 9, 2022 at 9:10
@LaaouatniAnas Problem is that animation with opacity inside makes div not scrollable and without opacity inside but outside after animation definition in .anim class div is scrolling fine but transition is not working. I added html to question — redevil
– redevil, Commented Jul 9, 2022 at 9:25
@LaaouatniAnas Yes they are containers for some javascript generated text — redevil
– redevil, Commented Jul 9, 2022 at 9:31
sorry, I can't figure it out. I am sorry. I hope you find someone with more experience with this stuff. I will delete my answer so people can find this question easily as not answered. have a good day! — Laaouatni Anas
– Laaouatni Anas, Commented Jul 9, 2022 at 9:36

redevil · Accepted Answer · 2022-07-12 09:21:30Z

0

I found a solution, problem was that i used opacity instead of filter:opacity, now i get opacity effect without scrolling problems

answered Jul 12, 2022 at 9:21

redevil

1557 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS keyframe animation not working on div element using opacity

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related