CSS3 fade in & slide out transition

css3-fade-in-slide-out-transition.markdown

CSS3 fade in & slide out transition

Really, really simple demo of a slide out transition with a fade in.

A Pen by Tim Austin on CodePen.

License.

index.html

<a class="slide" href="#">Slide Out</a>
<a class="spin" href="#">Spin</a>

<div id="fade-in" class="box"></div>
<div id="spin-in" class="box"></div>

<h1 class="spacing">Letter Spacing</h1>

script.js

$('.slide').on('click', function(){
    $('#fade-in').toggleClass('show');
});

$('.spin').on('click', function(){
    $('#spin-in').toggleClass('show2');
});

$('h1.spacing').on('mouseenter', function(){
  $(this).toggleClass('spaced');
});

scripts

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

style.css

body {
  margin: 1em;
}

a {
  text-decoration: none;
  background: #eee;
  padding: .5em;
  margin-bottom: 1em;
  display: inline-block;
}

.box {
  display: block;  
  background: lightblue;
  margin-bottom: 1em;
}

#fade-in {
  height: 150px;
  width: 1px;
  opacity: 0;
  transition: all .75s ease;
}

#fade-in.show {
  opacity: 1;
  height: 150px;
  width: 500px;
}

#spin-in {
  opacity: .2;
  height: 50px;
  width: 50px;
  transform: translateX(0) rotate(0deg);  
  transition: all .75s ease;
}

#spin-in.show2 {
  transform: translateX(450px) rotate(720deg);  
  opacity: 1;
}

h1.spacing {
  letter-spacing: 0;
  opacity: .5;
  transition: all .75s ease-out;
}

h1.spacing.spaced {
  opacity: 1;
  letter-spacing: 10px;
}

styles

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />