/* .shattered-piece is the main element,
it has sub-pseudo elements :before (:before is the first pseudo-element)
that act as shattered pieces of glass. */
.shattered-piece{
position: relative;
animation:fragment-swipe 5s linear infinite;
width: 20 px;
height: 40 px;
background-color: #FF69B4;
&::before {
content: '';
position: absolute;
top: 10px;
left: 10px;
width: 10 px;
height: 10 px;
background-color: #F92672;
transform: rotate 45 deg;
animation: fragment-shatter 1s linear;
}
@keyframes fragment-shatter {
0, 100 {
transform: scale 1;
}
50% {
transform: scale 0;
}
}
}