52 lines
936 B
CSS
52 lines
936 B
CSS
@keyframes spotlight {
|
|
0% {
|
|
transform: translateX(-100%) skew(-20deg);
|
|
}
|
|
100% {
|
|
transform: translateX(200%) skew(-20deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spotlight-slow {
|
|
0% {
|
|
transform: translateX(-100%) skew(-15deg);
|
|
}
|
|
100% {
|
|
transform: translateX(200%) skew(-15deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spotlight-reverse {
|
|
0% {
|
|
transform: translateX(200%) skew(20deg);
|
|
}
|
|
100% {
|
|
transform: translateX(-100%) skew(20deg);
|
|
}
|
|
}
|
|
|
|
@keyframes spotlight-diagonal {
|
|
0% {
|
|
transform: translate(-100%, -50%) skew(-25deg);
|
|
}
|
|
100% {
|
|
transform: translate(200%, 50%) skew(-25deg);
|
|
}
|
|
}
|
|
|
|
.animate-spotlight {
|
|
animation: spotlight 3s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-spotlight-slow {
|
|
animation: spotlight-slow 4s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-spotlight-reverse {
|
|
animation: spotlight-reverse 3.5s ease-in-out infinite;
|
|
}
|
|
|
|
.animate-spotlight-diagonal {
|
|
animation: spotlight-diagonal 4.5s ease-in-out infinite;
|
|
}
|