A Pen by Irakli Tsaishvili

Thumbnail
This awesome code was written by baron, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright baron ©
  • HTML
  • CSS
  • JavaScript
     <div class="wrap">
<transition-group class="pulse" stagger="300">
  <div key="adfd" class="anim pulse" stagger="400">one</div>
  <div key="adfd" class="anim pulse" stagger="500">two</div>
  <div key="adfd" class="anim pulse" stagger="600">three</div>
  <div key="adfd" class="anim pulse" stagger="800">four</div>
  <div key="addff" class="anim" stagger="900">{{test}}</div>
</transition-group>
 </div>

/*Downloaded from https://www.codeseek.co/baron/a-pen-by-irakli-tsaishvili-zWBWMV */
    .wrap {
 display: flex;
 flex-flow: column wrap;
 padding: 30px;
 background: teal;
 font: bold 20px/2 'Hack';
 color: white;
 
 .anim {
  padding: 20px;
  border: solid 3px pink;
  width: 200px;
  margin: 10px;
  align-items: flex-start;
  justify-content: center;
 }
}

@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
  }

  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
  animation-duration: 2s;

}


@for $i from 1 to 10 {
  .anim:nth-child(#{$i}) { animation-delay: $i * 3.25s; }
}


/*Downloaded from https://www.codeseek.co/baron/a-pen-by-irakli-tsaishvili-zWBWMV */
    new Vue({
 el: '.wrap',
 data: {
  test: 'test',
  keyz: 'rnado'
 },
 mounted: {
  
 }
});

Comments