Slide in

index.html

<div class="wrapper">
   <h1><span>Stumptown hammock</span></h1>
   <h2>Try-hard ethical ramps hella truffaut.</h2>
</div>

script.js

/*

To change the animation slide direction just change; 

    animation: fade-slide-left OR fade-slide-right TO,
    animation: fade-slide-up OR fade-slide-left.

*/

Slide in.markdown

Slide in

The @keyframes rule specifies the animation code.

The animation is created by gradually changing from one set of CSS styles to another.

During the animation, you can change the set of CSS styles many times.

Specify when the style change will happen in percent, or with the keywords "from" and "to", which is the same as 0% and 100%. 0% is the beginning of the animation, 100% is when the animation is complete.

@see: http://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp

A Pen by Rick Daalhuizen on CodePen.

License.

style.css

@import url(https://fonts.googleapis.com/css?family=Crete+Round);

body {
    background-color: #f0f0f0;
    font-family: 'Crete Round',Georgia,'Times New Roman',serif;
    font-weight: 300;
}

.wrapper {
  display: block;
  width: 950px;
  margin: 0 auto;
  padding-top: 5%;
}

h1 {
  font-size: 3vw;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 800;
  color: #fff;
  animation: fade-slide-down ease 1s;
}

h1 > span {
    line-height: 180%;
    background-color: #006341;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    padding: 15px 20px;
    border: 4px solid #f0f0f0;
}

h2 {
  display: inline-block;
  font-size: 1.5vw;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: #3a3531;
  color: #f0f0f0;
  border: 4px solid #006341;
  padding: 15px;
  animation: fade-slide-up ease 1s;
   
}

@keyframes fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-slide-down {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-slide-left {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fade-slide-right {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  
  to {
    opacity: 1;
    transform: translateX(0);
  }
}