Html :-
<button class="btn">
<span>Hover Me</span>
<div class="container">
<svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
<path fill="" d="M962.267429 233.179429q-38.253714 56.027429-92.598857 95.451429 0.585143 7.972571 0.585143 23.990857 0 74.313143-21.723429 148.260571t-65.974857 141.970286-105.398857 120.32-147.456 83.456-184.539429 31.158857q-154.843429 0-283.428571-82.870857 19.968 2.267429 44.544 2.267429 128.585143 0 229.156571-78.848-59.977143-1.170286-107.446857-36.864t-65.170286-91.136q18.870857 2.852571 34.889143 2.852571 24.576 0 48.566857-6.290286-64-13.165714-105.984-63.707429t-41.984-117.394286l0-2.267429q38.838857 21.723429 83.456 23.405714-37.741714-25.161143-59.977143-65.682286t-22.308571-87.990857q0-50.322286 25.161143-93.110857 69.12 85.138286 168.301714 136.265143t212.260571 56.832q-4.534857-21.723429-4.534857-42.276571 0-76.580571 53.979429-130.56t130.56-53.979429q80.018286 0 134.875429 58.294857 62.317714-11.995429 117.174857-44.544-21.138286 65.682286-81.115429 101.741714 53.174857-5.705143 106.276571-28.598857z"></path>
</svg>
<svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
<path fill="" d="M123.52064 667.99143l344.526782 229.708899 0-205.136409-190.802457-127.396658zM88.051421 585.717469l110.283674-73.717469-110.283674-73.717469 0 147.434938zM556.025711 897.627196l344.526782-229.708899-153.724325-102.824168-190.802457 127.396658 0 205.136409zM512 615.994287l155.406371-103.994287-155.406371-103.994287-155.406371 103.994287zM277.171833 458.832738l190.802457-127.396658 0-205.136409-344.526782 229.708899zM825.664905 512l110.283674 73.717469 0-147.434938zM746.828167 458.832738l153.724325-102.824168-344.526782-229.708899 0 205.136409zM1023.926868 356.00857l0 311.98286q0 23.402371-19.453221 36.566205l-467.901157 311.98286q-11.993715 7.459506-24.57249 7.459506t-24.57249-7.459506l-467.901157-311.98286q-19.453221-13.163834-19.453221-36.566205l0-311.98286q0-23.402371 19.453221-36.566205l467.901157-311.98286q11.993715-7.459506 24.57249-7.459506t24.57249 7.459506l467.901157 311.98286q19.453221 13.163834 19.453221 36.566205z"></path>
</svg>
<svg height="35" width="35" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1024 1024" class="icon">
<path fill="" d="M950.930286 512q0 143.433143-83.748571 257.974857t-216.283429 158.573714q-15.433143 2.852571-22.601143-4.022857t-7.168-17.115429l0-120.539429q0-55.442286-29.696-81.115429 32.548571-3.437714 58.587429-10.313143t53.686857-22.308571 46.299429-38.034286 30.281143-59.977143 11.702857-86.016q0-69.12-45.129143-117.686857 21.138286-52.004571-4.534857-116.589714-16.018286-5.12-46.299429 6.290286t-52.589714 25.161143l-21.723429 13.677714q-53.174857-14.848-109.714286-14.848t-109.714286 14.848q-9.142857-6.290286-24.283429-15.433143t-47.689143-22.016-49.152-7.68q-25.161143 64.585143-4.022857 116.589714-45.129143 48.566857-45.129143 117.686857 0 48.566857 11.702857 85.723429t29.988571 59.977143 46.006857 38.253714 53.686857 22.308571 58.587429 10.313143q-22.820571 20.553143-28.013714 58.88-11.995429 5.705143-25.746286 8.557714t-32.548571 2.852571-37.449143-12.288-31.744-35.693714q-10.825143-18.285714-27.721143-29.696t-28.306286-13.677714l-11.410286-1.682286q-11.995429 0-16.603429 2.56t-2.852571 6.582857 5.12 7.972571 7.460571 6.875429l4.022857 2.852571q12.580571 5.705143 24.868571 21.723429t17.993143 29.110857l5.705143 13.165714q7.460571 21.723429 25.161143 35.108571t38.253714 17.115429 39.716571 4.022857 31.744-1.974857l13.165714-2.267429q0 21.723429 0.292571 50.834286t0.292571 30.866286q0 10.313143-7.460571 17.115429t-22.820571 4.022857q-132.534857-44.032-216.283429-158.573714t-83.748571-257.974857q0-119.442286 58.88-220.306286t159.744-159.744 220.306286-58.88 220.306286 58.88 159.744 159.744 58.88 220.306286z"></path>
</svg>
</div>
</button>

Css :-

.btn {
position: relative;
display: flex;
overflow: hidden;
cursor: pointer;
width: 150px;
height: 50px;
background-color: #eeeeed;
border-radius: 80px;
border: none;
padding: 0 80px;
transition: all .2s ease;
justify-content: center;
align-items: center;
}

.btn:hover {
transform: scale(1.1);
}

.btn span {
position: absolute;
z-index: 99;
width: 150px;
height: 50px;
border-radius: 80px;
font-family: 'Courier New', Courier, monospace;
font-weight: 600;
font-size: 17px;
text-align: center;
line-height: 50px;
letter-spacing: 2px;
color: #eeeeed;
background-color: #1f1f1f;
padding: 0 10px;
transition: all 1.2s ease;
}

.btn .container {
display: flex;
width: 150px;
border-radius: 80px;
line-height: 50px;
}

.btn svg {
padding: 0 5px;
opacity: 0;
}

.btn .container svg:nth-of-type(1) {
transition-delay: 0.65s;
}

.btn .container svg:nth-of-type(2) {
transition-delay: 0.8s;
}

.container svg:nth-of-type(3) {
transition-delay: 0.5s;
}

.btn:hover span {
opacity: 0;
}

.btn:hover svg {
opacity: 1;
}

Html :-

<div class="loader">
<div class="circle">
<div class="dot"></div>
<div class="outline"></div>
</div>
<div class="circle">
<div class="dot"></div>
<div class="outline"></div>
</div>
<div class="circle">
<div class="dot"></div>
<div class="outline"></div>
</div>
<div class="circle">
<div class="dot"></div>
<div class="outline"></div>
</div>
</div>

Css :-

.loader {
display: flex;
justify-content: center;
align-items: center;
--color: hsl(0, 0%, 87%);
--animation: 2s ease-in-out infinite;
}

.loader .circle {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 20px;
height: 20px;
border: solid 2px var(--color);
border-radius: 50%;
margin: 0 10px;
background-color: transparent;
animation: circle-keys var(--animation);
}

.loader .circle .dot {
position: absolute;
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--color);
animation: dot-keys var(--animation);
}

.loader .circle .outline {
position: absolute;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
animation: outline-keys var(--animation);
}

.circle:nth-child(2) {
animation-delay: 0.3s;
}

.circle:nth-child(3) {
animation-delay: 0.6s;
}

.circle:nth-child(4) {
animation-delay: 0.9s;
}

.circle:nth-child(5) {
animation-delay: 1.2s;
}

.circle:nth-child(2) .dot {
animation-delay: 0.3s;
}

.circle:nth-child(3) .dot {
animation-delay: 0.6s;
}

.circle:nth-child(4) .dot {
animation-delay: 0.9s;
}

.circle:nth-child(5) .dot {
animation-delay: 1.2s;
}

.circle:nth-child(1) .outline {
animation-delay: 0.9s;
}

.circle:nth-child(2) .outline {
animation-delay: 1.2s;
}

.circle:nth-child(3) .outline {
animation-delay: 1.5s;
}

.circle:nth-child(4) .outline {
animation-delay: 1.8s;
}

.circle:nth-child(5) .outline {
animation-delay: 2.1s;
}

@keyframes circle-keys {
0% {
transform: scale(1);
opacity: 1;
}

50% {
transform: scale(1.5);
opacity: 0.5;
}

100% {
transform: scale(1);
opacity: 1;
}
}

@keyframes dot-keys {
0% {
transform: scale(1);
}

50% {
transform: scale(0);
}

100% {
transform: scale(1);
}
}

@keyframes outline-keys {
0% {
transform: scale(0);
outline: solid 20px var(--color);
outline-offset: 0;
opacity: 1;
}

100% {
transform: scale(1);
outline: solid 0 transparent;
outline-offset: 20px;
opacity: 0;
}
}

Html :-

<div class="loader">
<svg height="0" width="0" viewBox="0 0 64 64" class="absolute">
<defs class="s-xJBuHA073rTt" xmlns="http://www.w3.org/2000/svg">
<linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="b">
<stop class="s-xJBuHA073rTt" stop-color="#973BED"></stop>
<stop class="s-xJBuHA073rTt" stop-color="#007CFF" offset="1"></stop>
</linearGradient>
<linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="0" x2="0" y1="64" x1="0" id="c">
<stop class="s-xJBuHA073rTt" stop-color="#FFC800"></stop>
<stop class="s-xJBuHA073rTt" stop-color="#F0F" offset="1"></stop>
<animateTransform repeatCount="indefinite" keySplines=".42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1;.42,0,.58,1" keyTimes="0; 0.125; 0.25; 0.375; 0.5; 0.625; 0.75; 0.875; 1" dur="8s" values="0 32 32;-270 32 32;-270 32 32;-540 32 32;-540 32 32;-810 32 32;-810 32 32;-1080 32 32;-1080 32 32" type="rotate" attributeName="gradientTransform"></animateTransform>
</linearGradient>
<linearGradient class="s-xJBuHA073rTt" gradientUnits="userSpaceOnUse" y2="2" x2="0" y1="62" x1="0" id="d">
<stop class="s-xJBuHA073rTt" stop-color="#00E0ED"></stop>
<stop class="s-xJBuHA073rTt" stop-color="#00DA72" offset="1"></stop>
</linearGradient>
</defs>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#b)" d="M 54.722656,3.9726563 A 2.0002,2.0002 0 0 0 54.941406,4 h 5.007813 C 58.955121,17.046124 49.099667,27.677057 36.121094,29.580078 a 2.0002,2.0002 0 0 0 -1.708985,1.978516 V 60 H 29.587891 V 31.558594 A 2.0002,2.0002 0 0 0 27.878906,29.580078 C 14.900333,27.677057 5.0448787,17.046124 4.0507812,4 H 9.28125 c 1.231666,11.63657 10.984383,20.554048 22.6875,20.734375 a 2.0002,2.0002 0 0 0 0.02344,0 c 11.806958,0.04283 21.70649,-9.003371 22.730469,-20.7617187 z" class="dash" id="y" pathLength="360"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="--rotation-duration:0ms; --rotation-direction:normal;" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="10" stroke="url(#c)" d="M 32 32
m 0 -27
a 27 27 0 1 1 0 54
a 27 27 0 1 1 0 -54" class="spin" id="o" pathLength="360"></path>
</svg>
<div class="w-2"></div>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" style="--rotation-duration:0ms; --rotation-direction:normal;" viewBox="0 0 64 64" height="64" width="64" class="inline-block">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="8" stroke="url(#d)" d="M 4,4 h 4.6230469 v 25.919922 c -0.00276,11.916203 9.8364941,21.550422 21.7500001,21.296875 11.616666,-0.240651 21.014356,-9.63894 21.253906,-21.25586 a 2.0002,2.0002 0 0 0 0,-0.04102 V 4 H 56.25 v 25.919922 c 0,14.33873 -11.581192,25.919922 -25.919922,25.919922 a 2.0002,2.0002 0 0 0 -0.0293,0 C 15.812309,56.052941 3.998433,44.409961 4,29.919922 Z" class="dash" id="u" pathLength="360"></path>
</svg>
</div>

Css :-

.absolute {
position: absolute;
}

.inline-block {
display: inline-block;
}

.loader {
display: flex;
margin: 0.25em 0;
}

.w-2 {
width: 0.5em;
}

.dash {
animation: dashArray 2s ease-in-out infinite,
dashOffset 2s linear infinite;
}

.spin {
animation: spinDashArray 2s ease-in-out infinite,
spin 8s ease-in-out infinite,
dashOffset 2s linear infinite;
transform-origin: center;
}

@keyframes dashArray {
0% {
stroke-dasharray: 0 1 359 0;
}

50% {
stroke-dasharray: 0 359 1 0;
}

100% {
stroke-dasharray: 359 1 0 0;
}
}

@keyframes spinDashArray {
0% {
stroke-dasharray: 270 90;
}

50% {
stroke-dasharray: 0 360;
}

100% {
stroke-dasharray: 270 90;
}
}

@keyframes dashOffset {
0% {
stroke-dashoffset: 365;
}

100% {
stroke-dashoffset: 5;
}
}

@keyframes spin {
0% {
rotate: 0deg;
}

12.5%,
25% {
rotate: 270deg;
}

37.5%,
50% {
rotate: 540deg;
}

62.5%,
75% {
rotate: 810deg;
}

87.5%,
100% {
rotate: 1080deg;
}
}

Html :-

<button data-text="Awesome" class="button">
<span class="actual-text"> Dev_html </span>
<span class="hover-text" aria-hidden="true"> Dev_html </span>
</button>

Css :-

/* === removing default button style ===*/
.button {
margin: 0;
height: auto;
background: transparent;
padding: 0;
border: none;
}

/* button styling */
.button {
--border-right: 6px;
--text-stroke-color: rgba(255,255,255,0.6);
--animation-color: #37FF8B;
--fs-size: 2em;
letter-spacing: 3px;
text-decoration: none;
font-size: var(--fs-size);
font-family: "Arial";
position: relative;
text-transform: uppercase;
color: transparent;
-webkit-text-stroke: 1px var(--text-stroke-color);
}
/* this is the text, when you hover on button */
.hover-text {
position: absolute;
box-sizing: border-box;
content: attr(data-text);
color: var(--animation-color);
width: 0%;
inset: 0;
border-right: var(--border-right) solid var(--animation-color);
overflow: hidden;
transition: 0.5s;
-webkit-text-stroke: 1px var(--animation-color);
}
/* hover */
.button:hover .hover-text {
width: 100%;
filter: drop-shadow(0 0 23px var(--animation-color))
}

Html :-


<div class="loader"></div>

Css:-

.loader {
position: relative;
width: 2.5em;
height: 2.5em;
transform: rotate(165deg);
}

.loader:before, .loader:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
display: block;
width: 0.5em;
height: 0.5em;
border-radius: 0.25em;
transform: translate(-50%, -50%);
}

.loader:before {
animation: before8 2s infinite;
}

.loader:after {
animation: after6 2s infinite;
}

@keyframes before8 {
0% {
width: 0.5em;
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
}

35% {
width: 2.5em;
box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
}

70% {
width: 0.5em;
box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
}

100% {
box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
}
}

@keyframes after6 {
0% {
height: 0.5em;
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
}

35% {
height: 2.5em;
box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
}

70% {
height: 0.5em;
box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
}

100% {
box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
}
}

.loader {
position: absolute;
top: calc(50% - 1.25em);
left: calc(50% - 1.25em);
}

Html :-

<label class="ui-switch">
<input type="checkbox">
<div class="slider">
<div class="circle"></div>
</div>
</label>

Css:-

/* switch settings 👇 */

.ui-switch {
/* switch */
--switch-bg: rgb(135, 150, 165);
--switch-width: 48px;
--switch-height: 20px;
/* circle */
--circle-diameter: 32px;
--circle-bg: rgb(0, 56, 146);
--circle-inset: calc((var(--circle-diameter) - var(--switch-height)) / 2);
}

.ui-switch input {
display: none;
}

.slider {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: var(--switch-width);
height: var(--switch-height);
background: var(--switch-bg);
border-radius: 999px;
position: relative;
cursor: pointer;
}

.slider .circle {
top: calc(var(--circle-inset) * -1);
left: 0;
width: var(--circle-diameter);
height: var(--circle-diameter);
position: absolute;
background: var(--circle-bg);
border-radius: inherit;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTkuMzA1IDEuNjY3VjMuNzVoMS4zODlWMS42NjdoLTEuMzl6bS00LjcwNyAxLjk1bC0uOTgyLjk4Mkw1LjA5IDYuMDcybC45ODItLjk4Mi0xLjQ3My0xLjQ3M3ptMTAuODAyIDBMMTMuOTI3IDUuMDlsLjk4Mi45ODIgMS40NzMtMS40NzMtLjk4Mi0uOTgyek0xMCA1LjEzOWE0Ljg3MiA0Ljg3MiAwIDAwLTQuODYyIDQuODZBNC44NzIgNC44NzIgMCAwMDEwIDE0Ljg2MiA0Ljg3MiA0Ljg3MiAwIDAwMTQuODYgMTAgNC44NzIgNC44NzIgMCAwMDEwIDUuMTM5em0wIDEuMzg5QTMuNDYyIDMuNDYyIDAgMDExMy40NzEgMTBhMy40NjIgMy40NjIgMCAwMS0zLjQ3MyAzLjQ3MkEzLjQ2MiAzLjQ2MiAwIDAxNi41MjcgMTAgMy40NjIgMy40NjIgMCAwMTEwIDYuNTI4ek0xLjY2NSA5LjMwNXYxLjM5aDIuMDgzdi0xLjM5SDEuNjY2em0xNC41ODMgMHYxLjM5aDIuMDg0di0xLjM5aC0yLjA4NHpNNS4wOSAxMy45MjhMMy42MTYgMTUuNGwuOTgyLjk4MiAxLjQ3My0xLjQ3My0uOTgyLS45ODJ6bTkuODIgMGwtLjk4Mi45ODIgMS40NzMgMS40NzMuOTgyLS45ODItMS40NzMtMS40NzN6TTkuMzA1IDE2LjI1djIuMDgzaDEuMzg5VjE2LjI1aC0xLjM5eiIgLz4KPC9zdmc+");
background-repeat: no-repeat;
background-position: center center;
-webkit-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-o-transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, -webkit-transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2), 0px 1px 1px 0px rgba(0,0,0,0.14), 0px 1px 3px 0px rgba(0,0,0,0.12);
;
}

.slider .circle::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.75);
border-radius: inherit;
-webkit-transition: all 500ms;
-o-transition: all 500ms;
transition: all 500ms;
opacity: 0;
}

/* actions */

.ui-switch input:checked+.slider .circle {
left: calc(100% - var(--circle-diameter));
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHdpZHRoPSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxwYXRoIGZpbGw9IiNmZmYiCiAgICAgICAgZD0iTTQuMiAyLjVsLS43IDEuOC0xLjguNyAxLjguNy43IDEuOC42LTEuOEw2LjcgNWwtMS45LS43LS42LTEuOHptMTUgOC4zYTYuNyA2LjcgMCAxMS02LjYtNi42IDUuOCA1LjggMCAwMDYuNiA2LjZ6IiAvPgo8L3N2Zz4=");
}

.ui-switch input:active+.slider .circle::before {
-webkit-transition: 0s;
-o-transition: 0s;
transition: 0s;
opacity: 1;
width: 0;
height: 0;
}

Html :-

<div class="loader">
<div data-glitch="Loading..." class="glitch">Loading...</div>
</div>

Css :-

.glitch {
position: relative;
font-size: 25px;
font-weight: 700;
line-height: 1.2;
color: #fff;
letter-spacing: 5px;
z-index: 1;
animation: shift 1s ease-in-out infinite alternate;
}

.glitch:before,
.glitch:after {
display: block;
content: attr(data-glitch);
position: absolute;
top: 0;
left: 0;
opacity: 0.8;
}

.glitch:before {
animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
color: #8b00ff;
z-index: -1;
}

.glitch:after {
animation: glitch 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
color: #00e571;
z-index: -2;
}

@keyframes glitch {
0% {
transform: translate(0);
}

20% {
transform: translate(-3px, 3px);
}

40% {
transform: translate(-3px, -3px);
}

60% {
transform: translate(3px, 3px);
}

80% {
transform: translate(3px, -3px);
}

to {
transform: translate(0);
}
}

@keyframes shift {
0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
transform: skewX(0deg);
}

41% {
transform: skewX(10deg);
}

42% {
transform: skewX(-10deg);
}

59% {
transform: skewX(40deg) skewY(10deg);
}

60% {
transform: skewX(-40deg) skewY(-10deg);
}

63% {
transform: skewX(10deg) skewY(-5deg);
}

70% {
transform: skewX(-50deg) skewY(-20deg);
}

71% {
transform: skewX(10deg) skewY(-10deg);
}
}