Answers for "css transition fade in and out"

2

css fade out

/* Just add .fade-out class to element */

.fade-out {
	animation: fadeOut 2s;
  	opacity: 0;
}

@keyframes fadeOut {
  from {
  	opacity: 1;
  }
  to {
 	opacity: 0;
  }
}
Posted by: Guest on April-30-2021
0

css animation fade out after delay

<style>
  #text{
  transition-duration:1s; /* <= creates fade out effect */
  transition-delay:1s;
}
</style>

<p onclick="this.style.opacity=0" id="text">My text</p>
Posted by: Guest on May-26-2021
5

css fade out

/* Answer to: "css fade out" */

/*
  With the code below, all you have to do is use JavaScript to
  give the element ".hide-opacity" and it'll fade-out.

  Feel free to edit this code so it works on hover, focus, active
  or any other special selector possible with CSS and of course
  feel free to use this code with your JavaScript too!
*/

.successfully-saved {
    color: #FFFFFF;
    text-align: center;

    -webkit-transition: opacity 3s ease-in-out;
    -moz-transition: opacity 3s ease-in-out;
    -ms-transition: opacity 3s ease-in-out;
    -o-transition: opacity 3s ease-in-out;
     opacity: 1;
}

.successfully-saved.hide-opacity {
    opacity: 0;
}
Posted by: Guest on April-27-2020

Browse Popular Code Answers by Language