SCSS
.wrapper {
position: absolute;
width: 500px;
height: 500px;
top: 50%;
left: 50%;
margin: -250px;
background:white;
filter:blur(10px) contrast(15);
span {
background: black;
position: absolute;
border-radius: 50%;
display: inline-block;
}
p {
position: absolute;
top: 50%;
left: 50%;
}
p:nth-child(1) {
position: absolute;
animation: skewing-child .2s ease-in-out infinite alternate;
span {
width: 50px;
height: 50px;
margin: -25px;
animation: moving 2s cubic-bezier(.97,.01,.12,.99) infinite alternate;
}
}
p:nth-child(2) {
position: absolute;
animation: squishing 1s ease-in-out infinite alternate;
span {
width: 120px;
height: 120px;
top: 50%;
left: 50%;
margin: -60px;
animation: skewing 2s 1.5s ease-in-out infinite;
}
}
}
@keyframes skewing {
0% { transform: skewX(6deg); }
10% { transform: skewX(-6deg); }
20% { transform: skewX(4deg); }
30% { transform: skewX(-4deg); }
40% { transform: skewX(2deg); }
50% { transform: skewX(-6deg); }
55% { transform: skewX(6deg); }
60% { transform: skewX(-5deg); }
65% { transform: skewX(5deg); }
70% { transform: skewX(-4deg); }
75% { transform: skewX(4deg); }
80% { transform: skewX(-3deg); }
85% { transform: skewX(3deg); }
90% { transform: skewX(-2deg); }
95% { transform: skewX(2deg); }
100% { transform: skewX(1deg); }
}
@keyframes skewing-child {
0% { transform: skewX(-10deg); }
100% { transform: skewX(10deg); }
}
@keyframes moving {
0% {transform: translate(-200px);}
30% {transform: translate(-45px);}
70% {transform: translate(45px);}
100% {transform: translate(200px);}
}
@keyframes squishing {
10%, 40%, 80% { transform: scale(.95, .95); }
0%, 30%, 60%, 100% {transform: scale(1, 1);}
}
