style.css

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

section {
  background: #eee;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  overflow: hidden;
}

.module {
  width: 48%;
  min-height: 200px;
  background: white;
  position: relative;
  float: left;
  padding: 20px;
  margin-right: 4%;
  margin-bottom: 4%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.module:nth-child(even) {
  margin-right: 0;
}

body {
  background: url(http://s.cdpn.io/3/blurry-blue.jpg);
  background-size: cover;
  padding: 30px;
  position: relative;
}

.come-in {
  -webkit-transform: translateY(150px);
  -webkit-animation: come-in 0.8s ease forwards;
}

.come-in:nth-child(odd) {
  -webkit-animation-duration: 0.6s;
}

.already-visible {
  -webkit-transform: translateY(0);
  -webkit-animation: none;
}

@-webkit-keyframes come-in {
  to {
    -webkit-transform: translateY(0);
  }
}