CODEWITHSUNDEEP
css-animationskeyframe
Hacker
Hacker

Reputation: 7906

Display none animation using keyframes

I use angular 4 as my framework. I am trying to animate show hide of a section from left side. I have written below code

.help-section
    background-color   #EDF6F8;
    width  300px
    display none;
    position relative;
    padding 20px
    animation  hidefromleft 1s

 .help-section.show-help
     display block
     animation  showfromright 1s



@keyframes showfromright {
  from {
    right:-300px; display none;
  }
  to {
    right 0;display block;
  }
}

@keyframes hidefromleft {
  from {
    right 0;display block;
  }
  to {
    right:-300px; display none;
  }
}

Showing works perfectly fine, but hiding does not. Is there any way to handle hiding of the element with animation. Hiding does not take any animation.

Upvotes: 0

Views: 2649

Answers (1)

Matthew Ediger
Matthew Ediger

Reputation: 321

I don't think you can animate the display property from css alone.

Opacity and visibility can be animated however.

How about something like this:

.help-section {
    animation: hidefromleft 2s;
}

@keyframes hidefromleft {
    0% {right: 0; display: block; opacity: 1;}
    50% {right: -300px; opacity: 0}
    100% {opacity: 1; display: none;}
}

Personally, I always use transitions instead of animations (https://www.w3schools.com/css/css3_transitions.asp).

Upvotes: 1

Related Questions