FadeOut element to FadeIn another in the same place with CSS animations

Question

So I got a little circle shape with an icon that when I click, it will make the icon disappear and show a few elements in another div. The circle shape transforms into a 260x260 px square with CSS animation.

Until that I was fine, but I can't make the fadeIn/fadeOut work. Is there a way to handle this by toggling a CSS class over the parent element?

I can't just use opacity 0 to opacity 1 because I need the icon to really disappear with display none. Same for the other when going back to circle+icon state. But I just can't even make the opacity animation work. I also tried with those keyframes of fadeIn and fadeOut but didn't work either.

I found this fiddle but it looks so ugly having to use a setTimeout.

Is there a way to solve this with only CSS?

$('.toggle-btn').click(function() {
  $('.parent').toggleClass('expanded');
});

.parent {
  width: 40px;
  height: 40px;
  background-color: lightgray;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: fixed;
  left: 11px;
  bottom: 18px;
  text-align: center;
  transition: all 500ms;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
}

.parent.expanded {
  width: 200px;
  height: 200px;
  border-radius: 0 14px 0 0;
  left: 0;
  bottom: 0;
}

.children-1 {
  display: block;
  animation: opacity-up 500ms linear 700ms 1;
  animation-fill-mode: forwards;
}

.help {
  width: 21px;
  height: 21px;
  position: relative;
  top: 9px;
}

.children-2 {
  display: none;
  animation: opacity-down 500ms linear 700ms 1;
  animation-fill-mode: forwards;
}

.parent.expanded .children-1 {
  animation: opacity-down 500ms linear 700ms 1;
  animation-fill-mode: forwards;
  display: none;
}

.parent.expanded .children-2 {
  animation: opacity-up 500ms linear 700ms 1;
  animation-fill-mode: forwards;
  display: block;
}

@keyframes opacity-down {
  0% {
  	visibility: visible;
    opacity: 1;
  }
  100% {
  	opacity: 0;
  	visibility: hidden;
  }
}

@keyframes opacity-up {
  0% {
    opacity: 0;
    visibility: hidden;
  }
  100% {
  	opacity: 1;
  	visibility: visible;
  }
}

/*
@-webkit-keyframes fadeIn { 
  0% { opacity: 0;
    visibility: hidden;
    display: none;  }
  100% { opacity: 1;
    visibility: visible;
    display: block; }
}

@keyframes fadeIn {
  0% { opacity: 0;
    visibility: hidden;
    display: none;  }
  100% { opacity: 1;
    visibility: visible;
    display: block; }
}

@-webkit-keyframes fadeOut { 
  0% { opacity: 1;
    visibility: visible;
    display: block; }
  100% { opacity: 0;
    visibility: hidden;
    display: none; }
}

@keyframes fadeOut {
  0% { opacity: 1;
    visibility: visible;
    display: block; }
  100% { opacity: 0;
    visibility: hidden;
    display: none;  }
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="children-1">
    <img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png"/>
  </div>
  <div class="children-2">
    <p class="paragraph">
      Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
    </p>
  </div>
</div>

<button class="toggle-btn">TOGGLE!</button>

Not sure if this will work....check this pen codepen.io/repzeroworld/pen/jBXRLX . — repzero
omfg it works like a charm!! you're the man! i had to fix something on your code tho, you had a typo error on "lineal" because it's "linear", added that and worked awesome! post it as an answer and i will mark it :) Thanks! — msqar
ensure you take out css "animation" from your question title just so everyone will know you would like a simple transition approach with classes. — repzero

repzero repzero · Accepted Answer · 2017-03-31T23:35:02

Until that I was fine, but I can't make the fadeIn/fadeOut work. Is there a way to handle this by toggling a CSS class over the parent element?

You can do this without animation with toggle classes

$('.toggle-btn').click(function() {
  $('.parent').toggleClass('expanded');
  $('.children-2').toggleClass('show1');
  $('.children-1').toggleClass('show2');
});

.parent {
  width: 40px;
  height: 40px;
  background-color: lightgray;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  position: fixed;
  left: 11px;
  bottom: 18px;
  text-align: center;
  transition: all 500ms;
  -webkit-transition: all 500ms;
  -moz-transition: all 500ms;
}

.parent.expanded {
  width: 200px;
  height: 200px;
  border-radius: 0 14px 0 0;
  left: 0;
  bottom: 0;
}

.children-1 {
  display: block;
  animation: opacity-up 500ms lineal 0s 1;
  animation-fill-mode: forwards;
}

.help {
  width: 21px;
  height: 21px;
  position: relative;
  top: 9px;
}

.children-2 {
  opacity: 0;
  transition: opacity 1s;
}

.children-1 {
  opacity: 1;
  transition: opacity 1s;
}

.show1 {
  opacity: 1;
}

.show2 {
  opacity: 1;
}

.parent.expanded .children-1 {
  animation: opacity-down 500ms lineal 0s 1;
  animation-fill-mode: forwards;
  display: none;
}

.parent.expanded .children-2 {
  animation: opacity-up 500ms lineal 0s 1;
  animation-fill-mode: forwards;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="children-1">
    <img class="help" src="http://media1.calvinklein.com/images/static/e-comm/icons/questionMark.png" />
  </div>
  <div class="children-2">
    <p class="paragraph">
      Here is some content+inputs+other stuff, Here is some content+inputs+other stuff
    </p>
  </div>
</div>

<button class="toggle-btn">TOGGLE!</button>

FadeOut element to FadeIn another in the same place with CSS animations

1 Answers