Toggle CSS3 Fade

Toggle CSS3 fade?

This particular page of the documentation was helpful:

transition-property – What property should animate, e.g., opacity.

transition-duration – How long the transition should last.

transition-timing-function – The timing function for the transition
(e.g., linear vs. ease-in vs. a custom cubic bezier function).

transition – A shorthand for all three properties.

So you can call a specific property, like opacity, or you can use all in a class name. I think the latter is possibly more useful, even if you have only one property to apply.

Basically, you can use a class with the all transition properties and toggle the class name. One of the things I found interesting was that you can actually do multiple versions on the class add (not quite the same effect occurs when removing the class, though). Also, couple opacity with width and height and it will work better than using display: none, as far as I could tell.

The below demonstrates how you could use the -webkit-transition property in layers. This is a simplified version, followed by a more sophisticated demonstration:

#block.transition let's me differentiate my transition properties:

<div id="block" class="transition"></div>

Basic properties, not animated:

#block {
    margin: 25px auto;
    background: red;
}

The initial "unseen" state:

#block.transition {
    opacity: 0;  
    width: 0;
    height: 0;
    padding: 0;
    -webkit-transition: all 2s ease-in-out; 
}

And the animation steps:

#block.transition.show {
    opacity: .3;
    width: 50px;
    height: 50px;
    background: orange;
    -webkit-transition: all .5s ease-in-out; 
}
#block.transition.show {
    opacity: .4;
    width: 150px;
    height: 150px;
    background: black;
    -webkit-transition: all 1s ease-in-out; 
}
#block.transition.show {
    opacity: 1;  
    padding: 100px;
    background: blue;
    -webkit-transition: all 3s ease-in-out; 
}

Note, all I'm doing here is toggling the .show class:

$(document).ready(function load(){
    var $block = $("#block");

    $('.toggle').click(function c(){
        $block.toggleClass('show');
    });
});

Demo (Source)

Markup

<p><button class="toggle">Toggle Blocks</button></p>

<div id="block" class="transition">
    <div class="blocks transition"></div>
    <div class="blocks transition"></div>
    <div class="blocks transition"></div>
</div>

CSS

The containing #block:

#block {
    margin: 25px auto;
    background: #333;
    -webkit-transition: opacity, display, width 1.5s ease-in-out; 
}
#block.transition {
    opacity: 0;  
    width: 0;
    padding: 0;
    border: 1px solid yellow;
    -webkit-transition: all 1.9s ease-in-out; 
}
#block.transition.show {
    opacity: .3;  
    border-color: blue;
    -webkit-transition: all .5s ease-in-out; 
}
#block.transition.show {
    opacity: 1;  
    width: 550px;
    padding: 25px;
    border-width: 15px;
    -webkit-transition: all 3s ease-in-out; 
}

Group of three .blocks:

.blocks {
    display: inline-block;
    background-color: red;
}
.blocks.transition {
    opacity: .1; 
    width: 0;
    height: 0;
    margin: 0; 
    -webkit-transition: all 1.7s ease-in-out; 
}
.blocks.transition.show {
    opacity: 1;
    width: 150px;
    height: 150px;
    margin: 10px;
    -webkit-transition: all 4.5s ease-in-out;
}

jQuery

$(document).ready(function load(){
    var $block = $("#block"),
        $blocks = $block.find(".blocks.transition");

    $('.toggle').click(function c(){
        $block.toggleClass('show');

        $blocks.delay(1500).toggleClass('show');
    });
});

Demo (Source)

Hide/show toggle on hover with fade in css

You can use max-height to remove the unwanted space

See code snippet bellow:

#stuff {  opacity: 0.0;  -webkit-transition: all 400ms ease-in-out;  -moz-transition: all 400ms ease-in-out;  -ms-transition: all 400ms ease-in-out;  -o-transition: all 400ms ease-in-out;  transition: all 400ms ease-in-out;  color: black;  text-align: center;  border-style: solid;  border-width: 1px;  border-color: #e0e0e0;  border-radius: 25px;  width: 200px;  max-height:0;}
#hover {  width: 150px;  height: 10px;  margin-bottom: 15px;  cursor: pointer;  float: center;  font-family: 'Open Sans', FontAwesome;  font-weight: 600;}
#hover:hover+#stuff {  opacity: 1.0;  max-height:100%;  }

<div id="hover">HOVER HERE</div><div id="stuff">Revealed text</div>

How to smooth fade in-out for toggle text using button click?

You can use jquery for this:

  $( "#txt-1" ).fadeOut( "slow", function() {
     $("#txt-2").fadeIn();
  });

First fade out the elements you want, then use the callback function to fade the others in.

function toggleText(){
  $( "#txt-1" ).fadeOut( "slow", function() {
     $("#txt-2").fadeIn();
  });
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="toggleText()">Toggle</button>

<p id="txt-1">Hello</p>
<p id="txt-2" style="display: none;">How are you?</p>

Toggle slide fade out, slide fade (back) in with CSS Keyframes and React

the slide back in does not have any transition or animation

I've searched for a solution to animate the element back to its original state after a keyframe is removed, and wasn't able to find one.

Having a keyframe means an animation between start and end states, so initial page animation is inevitable if you want to animate both in and out.

However, you could achieve your desired result with just transition instead of keyframes.

Just add the new state in .slideLeft class:

.slideLeft {
  transform: translate(-100%, 0);
  opacity: 0;
}

And give the .box some transition properties:

.box {
  transition-duration: .5s;
  transition-property: transform, opacity;
}

I updated your JS Fiddle.

CSS how to make an element fade in and then fade out?

Use css @keyframes

.elementToFadeInAndOut {
    opacity: 1;
    animation: fade 2s linear;
}

@keyframes fade {
  0%,100% { opacity: 0 }
  50% { opacity: 1 }
}

here is a DEMO

.elementToFadeInAndOut {    width:200px;    height: 200px;    background: red;    -webkit-animation: fadeinout 4s linear forwards;    animation: fadeinout 4s linear forwards;}
@-webkit-keyframes fadeinout {  0%,100% { opacity: 0; }  50% { opacity: 1; }}
@keyframes fadeinout {  0%,100% { opacity: 0; }  50% { opacity: 1; }}

<div class=elementToFadeInAndOut></div>

How to add fading effect when you toggle css in JavaScript

Add visability: hidden; and visability: visible; in second class

toggle text fade when nav slides open and closes

If I understood your requirement correctly you want have a timer slider in and out? if so you have to set the timer correctly in 'overlay class. At present I have set it for 2 seconds.

function openNav() {  $(".overlay-content").fadeIn(2000);  document.getElementById("myNav").style.width = "100%";  document.getElementById("open-btn").style.display = "none";
}
function closeNav() {  $(".overlay-content").fadeOut(500);  document.getElementById("myNav").style.width = "0%";  document.getElementById("open-btn").style.display = "block";
}

body {  background-color: gray;}
elementToFadeInAndOut {  animation: fadeInOut 4s linear forwards;}
.overlay {  height: 100%;  width: 0;  position: fixed;  z-index: 1;  top: 0;  left: 0;  background-color: red;  overflow-x: hidden;  transition: 2s;  /* here */}
.overlay-content {  position: relative;  top: 25%;  margin-top: 30px;  display:none;  ul {    padding-left: 0;    li {      padding-bottom: 5rem;    }  }}
.overlay a {  text-decoration: none;  text-transform: uppercase;  font-size: 30px;  color: red;  display: block;  transition: 0.3s;  letter-spacing: 5px;  @include bodyLight();}
.overlay .closebtn {  position: absolute;  top: 50px;  right: 70px;  @include bodyBold();  font-size: 12px;  color: black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script><div class="col-4 d-flex flex-column align-items-end">  <button id="open-btn" onclick="openNav()">Menu</button></div>

<nav class="primary__nav">  <div id="myNav" class="overlay">    <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">close</a>    <div id="hide" class="container overlay-content">      <ul>        <li>this is text 123</li>        <li>this is text 123</li>        <li>this is text 123</li>        <li>this is text 123</li>      </ul>    </div>  </div></nav>

Fade out animation in pure CSS

Here is a 100% pure css solution.

#square { width: 50px; height: 50px; background: lightblue; transition: opacity 1s ease-in-out;  -webkit-transition: opacity 1s ease-in-out;  -moz-transition:opacity 1s ease-in-out;}#myBox:checked ~ .animated {  opacity: 0;}#myBox ~ .animated {   opacity: 1;}

<input type="checkbox" id="myBox" style="display:none;"/><button id="toggle"><label for="myBox">toggle</label></button><div id="square" class="animated"></div>