:root {
--animate-set: all 0.3s ease-in-out;
}  .fade-out {
transition: var(--animate-set);
opacity: 1;
}
.fade-out:hover {
opacity: 0;
} .fade-in {
transition: var(--animate-set);
opacity: 0;
}
.fade-in:hover {
opacity: 1;
} .grow {
transition: var(--animate-set);
}
.grow:hover {
transform: scale(1.05);
} .shrink {
transition: var(--animate-set);
}
.shrink:hover {
transform: scale(0.95);
} .shaking:hover {
animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
perspective: 1000px;
}
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
} .rotate {
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
}
.rotate:hover {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
} .darker {
transition: var(--animate-set);
}
.darker:hover {
filter: brightness(80%);
} .brighter {
transition: var(--animate-set);
}
.brighter:hover {
filter: brightness(200%);
} #gradient-follow-mouse {
height: 20vh;
width: 100vw;
background: transparent radial-gradient(at calc(var(--mouse-x, 0) * 100%) calc(var(--mouse-y, 0) * 100%), yellow, green) no-repeat 0 0;
}