Happy Animation

by paulftw

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<div class=animation-container>
  <i class='fa fa-star item'></i>
  <i class='fa fa-tree item'></i>
  <i class='fa fa-heart item'></i>
  <i class='fa fa-gift item'></i>
  <i class='fa fa-smile-o item'></i>
  <i class='fa fa-soccerball-o item'></i>
  <i class='fa fa-star item'></i>
  <i class='fa fa-tree item'></i>
  <i class='fa fa-heart item'></i>
  <i class='fa fa-gift item'></i>
  <i class='fa fa-smile-o item'></i>
  <i class='fa fa-soccerball-o item'></i>
</div>

CSS

.animation-container {
  margin: 20px;
  height: 300px;
  width: 300px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  font-size: 24px;
}

.item {
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  
  animation: moveup2 2.1s infinite cubic-bezier(0.145, 1.650, 0.620, 1.640),
             right1 2.1s infinite linear;
             
  animation-duration: 1.9s, 1.9s;
}
.item:nth-child(2n) {
  animation: moveup2 2.1s infinite cubic-bezier(0.145, 1.650, 0.620, 1.640),
             left1 2.1s infinite linear;
}

.item:nth-child(5n) {
  animation-duration: 2.9s, 2.9s;
  animation-delay: -0.5s, -0.5s;
}
.item:nth-child(5n+1) {
  animation-duration: 2.7s, 2.7s;
  animation-delay: -0.6s, -0.6s;
}
.item:nth-child(5n+2) {
  animation-duration: 2.6s, 2.6s;
  animation-delay: -0.7s, -0.7s;
}
.item:nth-child(5n+3) {
  animation-duration: 2.5s, 2.5s;
  animation-delay: -0.8s, -0.8s;
}

.item:nth-child(3n  ) { color: #aa1; }
.item:nth-child(3n+1) { color: #1a1; }
.item:nth-child(3n+2) { color: #a11; }

.item:nth-child(4n  ) { animation-name: moveup1, left1; }
.item:nth-child(4n+1) { animation-name: moveup2, left2; }
.item:nth-child(4n+2) { animation-name: moveup1, right1; }
.item:nth-child(4n+3) { animation-name: moveup2, right2; }

@keyframes right1 {
   0% { left: 50% }
 100% { left: 85% }
}
@keyframes right2 {
   0% { left: 45% }
 100% { left: 95% }
}

@keyframes left1 {
   0% { left: 55% }
 100% { left: 10% }
}
@keyframes left2 {
   0% { left: 48% }
 100% { left: 20% }
}


@keyframes moveup1 {
   0% {transform: translateY(0) }
 100% {transform: translateY(-100px) rotateX(900deg) rotateY(700deg) }
}
@keyframes moveup2 {
   0% {transform: translateY(0) rotateX(-100deg) }
 100% {transform: translateY(-120px) rotateX(900deg) }
}