Alive recreation

Alive recreation.markdown

Alive recreation

A Pen by Abhijit Hota on CodePen.

License.

index.html

<a href="https://dribbble.com/shots/2068423-Alive">Trying to recreate this.</a>

<div class="header">My CSS Version</div>
<div class="wrap">
<div class="minions">
   <div class="elem"></div>
   <div class="elem"></div>
   <div class="elem"></div>
</div>
<div class="minions2">
   <div class="elem"></div>
   <div class="elem"></div>
   <div class="elem"></div>
</div>
<div class="minions3">
   <div class="elem"></div>
   <div class="elem"></div>
   <div class="elem"></div>
</div>
   </div>
<div class="header2">Original .gif file</div>
<img src="https://d13yacurqjgara.cloudfront.net/users/397346/screenshots/2068423/2.gif" alt="" />

script.js

alsolike(
  "waPRBx", "Bumpy",
  "VLevab", "Rainbow sphere",
  "MwWNOP", "IBM in CSS"
);

scripts

<script src="http://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js"></script>

style.css

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
  background: #ff3f4f;
   font-family: 'Open Sans', sans-serif;
   overflow: hidden;
}
.minions,.minions2, .minions3 {
  height: 40px;
  width: 120px;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 40%;
  left: 0;
  right: 0;
   .elem {
  height:40px;
  display: inline-block;
  width: 40px;
 background: linear-gradient(0deg, #ff3f4f 50%, #4f141e 50%);
  border-radius: 100%;
  margin: -2px;
  animation: woe 0.8s infinite;
   &:nth-child(2) {
   animation: woe2 0.8s infinite;
}
}
}
.minions2{
   left: 70%;
   right: 10% !important;
   .elem{
      background: linear-gradient(0deg, #4f141e  50%, #ff3f4f 50%);
      animation:boing 0.8s  infinite;
      animation-delay:0.2s;
      &:nth-child(2){
         animation:boing 0.8s  infinite;
         animation-delay:0.1s;
      }
      &:nth-child(3){
         animation:boing 0.8s  infinite;
      }
   }
}
.minions3{
   left: 10% !important;
   right: 70% !important;
   .elem{
      background: linear-gradient(0deg, #4f141e  50%, transparent 50%);
      &:nth-child(1){
         animation:tumble 0.8s infinite;
         transform:rotate(7deg);
      }
      &:nth-child(2){
         animation:tumble2 0.8s infinite;
         transform:rotate(-12deg); 
      }
      &:nth-child(3){
         animation:tumble3 0.8s infinite;
         transform:rotate(12deg); 
      }
   }
}
@keyframes tumble{
   50%{transform: rotate(-10deg);} 
}
@keyframes tumble2{
   50%{transform:rotate(12deg);}
   }
@keyframes tumble3{
   50%{transform:translate(-4px, -5px) rotate(-22deg);} 
   }
@keyframes boing{
   50%{transform:translateY(-5px);}
}
@keyframes woe {
  100% {transform: rotate(-360deg);}
}
@keyframes woe2{
   100%{transform:rotate(360deg);}
}
/////////////////////////////
a{
   color:#4f141e;
   text-decoration:none;
   position: absolute;
   opacity: 0.6;
   font-size:20px;
   margin: 20px;
   &:hover{
      opacity: 1 ;
   }

}

.header,.header2{
   position: absolute;
   left: 0;
   right: 0;
   margin: auto;
   bottom: 70%;
   top: 0px;
   height: 40px;
   width: 300px; 
   font-size:30px;
   color:#4f141e;
   font-weight:bold;
}
.header2{
   top: 70%;
}
img{
   margin-top: 20%; 
}