<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: {
}
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
