.shattered-self{
animation: shattering 2s linear infinite;
transform-box: fill-box;
transform-origin: center;
}
.fragment-1{
animation: fragment-fall 2s ease 0s 1 forwards;
position: absolute;
top: 20%;
left: 20%;
transform: rotate(45deg);
}
.fragment-2{
animation: fragment-fall 2s ease 0s 1 forwards;
position: absolute;
top: 30%;
left: 30%;
transform: rotate(-45deg);
}
.fragment-3{
animation: fragment-fall 2s ease 0s 1 forwards;
position: absolute;
top: 40%;
left: 40%;
transform: rotate(90deg);
}
.shattered-particles{
width: 10px;
height: 10px;
background-color: #66D9EF;
border: 1px solid #66D9EF;
transform: rotate(10deg);
position: absolute;
animation: particle-fall 1s ease-out infinite;
}
.particle-1{
top: 35%;
left: 45%;
}
.particle-2{
top: 25%;
left: 55%;
}
.particle-3{
top: 15%;
left: 65%;
}
.animation-fade{
width: 20px;
height: 20px;
background-color: #F8F8F2;
border-radius: 50%;
animation: fading 2s ease-in-out infinite;
position: absolute;
transform: rotate(180deg);
z-index: 0;
}
.fade-1{
top: 55%;
left: 10%;
}
.fade-2{
top: 65%;
left: 20%;
}
.fade-3{
top: 75%;
left: 30%;
}