April 13, 2015

Heart pixel animation

Heart pixel animation

Done using CSS3 animation and animation-delay properties. No javascript or images used here.

HTML

<div class="wrapper">
      <div class="box white"></div>
      <div class="box delay-10"></div>
      <div class="box delay-6"></div>
      <div class="box white"></div>
      <div class="box white"></div>
      <div class="box white"></div>
      <div class="box delay-1"></div>
      <div class="box delay-3"></div>
      <div class="box white"></div>
      <div class="box clear delay-1"></div>
      <div class="box delay-2"></div>
      <div class="box delay-3"></div>
      <div class="box delay-4"></div>
      <div class="box white"></div>
      <div class="box delay-5"></div>
      <div class="box delay-6"></div>
      <div class="box delay-7"></div>
      <div class="box delay-8"></div>
      <div class="box clear delay-10"></div>
      <div class="box delay-5"></div>
      <div class="box delay-3"></div>
      <div class="box delay-7"></div>
      <div class="box delay-1"></div>
      <div class="box delay-9"></div>
      <div class="box delay-2"></div>
      <div class="box delay-4"></div>
      <div class="box delay-8"></div>
      <div class="box clear delay-6"></div>
      <div class="box delay-4"></div>
      <div class="box delay-5"></div>
      <div class="box delay-6"></div>
      <div class="box delay-1"></div>
      <div class="box delay-9"></div>
      <div class="box delay-10"></div>
      <div class="box delay-3"></div>
      <div class="box delay-2"></div>
      <div class="box clear white"></div>
      <div class="box delay-10"></div>
      <div class="box delay-9"></div>
      <div class="box delay-8"></div>
      <div class="box delay-2"></div>
      <div class="box delay-3"></div>
      <div class="box delay-5"></div>
      <div class="box delay-1"></div>
      <div class="box white"></div>
      <div class="box clear white"></div>
      <div class="box white"></div>
      <div class="box delay-4"></div>
      <div class="box delay-6"></div>
      <div class="box delay-1"></div>
      <div class="box delay-3"></div>
      <div class="box delay-2"></div>
      <div class="box white"></div>
      <div class="box white"></div>
      <div class="box clear white"></div>
      <div class="box white"></div>
      <div class="box white"></div>
      <div class="box delay-7"></div>
      <div class="box delay-6"></div>
      <div class="box delay-3"></div>
      <div class="box white"></div>
      <div class="box white"></div>
      <div class="box white"></div>
      <div class="box clear white"></div>
      <div class="box white"></div>
      <div class="box white"></div>
      <div class="box white"></div>
      <div class="box delay-5"></div>
      <div class="box white"></div>
      <div class="box white"></div>
      <div class="box white"></div>
      <div class="box white"></div>
</div>

CSS

*{
  box-sizing: border-box;
}
*:before,
*:after{
  box-sizing: border-box;
}
.wrapper{
 display: table;
 margin: 50px auto;
 position: relative;
}
html,body{
 min-height: 100%;
}
.box{
 width: 25px;
 height: 25px;
 float: left;
 background: #fd92a4;
 margin: 0 2px 2px 0;
 position: relative;
 opacity: 0;
 top: 0;
 border-radius: 2px;
}
.clear{
 clear: left;
}
.white{
 background: none !important;
}
.box:not(.white){
 transition: all .3s ease;
 animation: animation 4s infinite;
}
.box:not(.white):hover{
 transform: scale(1.1,1.1);
 background: rgb(190,0,0);
}
@keyframes animation{
 0%{
  opacity: 0;
  top: -300px;
 }
 30%{
  opacity: 1;
  top: 0;
 }
 70%{
  opacity: 1;
  top: 0;
 }
 100%{
  opacity: 0;
  top: 300px;
 }
}
.delay-1{animation-delay: .5s !important;}
.delay-2{animation-delay: .6s !important;}
.delay-3{animation-delay: .7s !important;}
.delay-4{animation-delay: .8s !important;}
.delay-5{animation-delay: .9s !important;}
.delay-6{animation-delay: 1s !important;}
.delay-7{animation-delay: 1.1s !important;}
.delay-8{animation-delay: 1.2s !important;}
.delay-9{animation-delay: 1.3s !important;}
.delay-10{animation-delay: 1.4s !important;}
demo

No comments:

Post a Comment

Popular Posts

Views