How to make the slide down animation using css3 with display none to block

Question

I was just wondering how could i add display: none and display: block to my animation with a ease effect.

HTML

<div class="floating-vociebox">
  <a>New updates</a>
</div>

Any help would be appreciated

DEMO

Answer 1

I have tried to start from display:none;. I have three variants to add movement and fade-in by CSS3 and jQuery. Which one is more like what you need?

$( document ).ready(function(){
	$('.variant-1').fadeIn( 3000 ).addClass('animate-1');
	
  $('.variant-2').css('display','block').delay( 0 ).queue(function(){
    $(this).addClass('animate-2').dequeue();
  });
	
  $('.variant-3').addClass('visible').delay( 0 ).queue(function(){
    $(this).addClass('animate-2').dequeue();
  });
});

.floating-vociebox {
  background-color: blue;
  width: 120px;
  height: 30px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.19);
  border-radius: 4px;
  position: fixed;
  top: 100px;
  transform: translateY(-90px);
  display: none;
}
.variant-1 {
  left: 10px;
  transition: background-color 0.3s, transform 3s ease-in-out;
}
.variant-2 {
  left: 150px;
}
.variant-3 {
  left: 290px;
}
.variant-2, 
.variant-3 {
  opacity: 0;
  transition: background-color 0.3s, opacity 3s ease-in, transform 3s ease-in-out;
}
.visible {
  display: block;
}
.animate-1 {
  transform: translateY(0);
}
.animate-2 {
  opacity: 1;
  transform: translateY(0);
}
.floating-vociebox:hover {
  background-color: darkblue;
}
.floating-vociebox a {
  cursor: pointer;
  display: block;
  text-align: center;
  line-height: 30px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

<div class="floating-vociebox variant-1">
  <a>Variant 1</a>
</div>
<div class="floating-vociebox variant-2">
  <a>Variant 2</a>
</div>
<div class="floating-vociebox variant-3">
  <a>Variant 3</a>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

https://jsfiddle.net/glebkema/gcg7f4pj/