CODEWITHSUNDEEP
htmlcssanimationcss-animationstransition
Luca
Luca

Reputation: 348

hide a text at the end of the animation

 .title2 {
   position: absolute;
   top: 0;
   right: 31%;
   animation-name: fadeOutOpacity;
   animation-iteration-count: 1;
   animation-delay: 2.5s;
   animation-timing-function: ease-out;
   animation-duration: 1s;
 }
 @keyframes fadeOutOpacity {
   0% {
     opacity: 1;
   }
   90% {
     opacity: 0;
   }
   100% {
     display: none;
   }
 }

Could someone explain to me how I can make it disappear? I thought so it worked but it doesn't work! I wanted to make a text disappear, the effect works but then the text comes back visible when instead I would like to hide it permanently at the end of the animation.

Upvotes: 0

Views: 906

Answers (2)

Alex Chirkin
Alex Chirkin

Reputation: 103

If you even toggle the display property from none to block, your transition on other elements will not occur. It's work only with displayed elements. If u want to hide element u can use opacity, height

.title2 {
  width: 100px;
  height: 50px;
  background: red;
   position: absolute;
   top: 0;
   right: 31%;
   animation: 1s fadeOutOpacity ease-out;
   opacity: 0
 }
 @keyframes fadeOutOpacity {
   0% {
     opacity: 1;
   }
   100% {
     opacity: 0;
   }
 }
<div class="title2"/>

Upvotes: 1

nad
nad

Reputation: 1100

You can use the CSS property animation-fill-mode, and change your Keyframe Animation like so:

.title2 {
  position: absolute;
  top: 0;
  right: 31%;
  animation-name: fadeOutOpacity;
  animation-iteration-count: 1;
  animation-delay: 2.5s;
  animation-timing-function: ease-out;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeOutOpacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Upvotes: 1

Related Questions