<div class="cp_anime10">
<div class="cp_spinner cp_heart"></div>
</div>
.cp_anime10 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.cp_anime10 .cp_spinner {
position: relative;
display: inline-block;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 48px;
height: 40px;
}
.cp_anime10 .cp_heart {
-webkit-animation: anime10_heart 2s ease-in-out infinite;
animation: anime10_heart 2s ease-in-out infinite;
}
.cp_anime10 .cp_heart:before,
.cp_anime10 .cp_heart:after {
position: absolute;
top: 0;
display: inline-block;
width: 24px;
height: 35px;
content: ' ';
border-radius: 12px 12px 0 0;
}
.cp_anime10 .cp_heart:before {
left: 8px;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
background-image: -webkit-linear-gradient(254deg, #f093fb 0%, #f5576c 90%);
background-image: linear-gradient(-164deg, #f093fb 0%, #f5576c 90%);
}
.cp_anime10 .cp_heart:after {
right: 8px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background-image: -webkit-linear-gradient(330deg, #f093fb 0%, #f5576c 100%);
background-image: linear-gradient(120deg, #f093fb 0%, #f5576c 100%);
}
@-webkit-keyframes anime10_heart {
0% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
15% { -webkit-transform: scale(1.4);
transform: scale(1.4);
-webkit-transform-origin: center;
transform-origin: center; }
30% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
45% { -webkit-transform: scale(1.4);
transform: scale(1.4);
-webkit-transform-origin: center;
transform-origin: center; }
100%,
60% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
}
@keyframes anime10_heart {
0% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
15% { -webkit-transform: scale(1.4);
transform: scale(1.4);
-webkit-transform-origin: center;
transform-origin: center; }
30% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
45% { -webkit-transform: scale(1.4);
transform: scale(1.4);
-webkit-transform-origin: center;
transform-origin: center; }
100%,
60% { -webkit-transform: scale(0.9);
transform: scale(0.9);
-webkit-transform-origin: center;
transform-origin: center; }
}