51 lines
No EOL
631 B
CSS
51 lines
No EOL
631 B
CSS
@property --turn {
|
|
initial-value: 0deg;
|
|
inherits: false;
|
|
syntax: '<angle>';
|
|
}
|
|
|
|
@property --offset {
|
|
initial-value: 0ms;
|
|
inherits: false;
|
|
syntax: '<time>';
|
|
}
|
|
|
|
svg {
|
|
max-height: 100svh;
|
|
}
|
|
|
|
g {
|
|
animation: turn var(--duration) var(--offset) infinite ease-in-out;
|
|
--offset: calc(var(--f) * 150ms);
|
|
--duration: 4000ms;
|
|
}
|
|
|
|
@keyframes turn {
|
|
15% {
|
|
--turn: 0deg;
|
|
}
|
|
25% {
|
|
--turn: 70deg;
|
|
}
|
|
30% {
|
|
--turn: 50deg;
|
|
}
|
|
35% {
|
|
--turn: 60deg;
|
|
}
|
|
65% {
|
|
--turn: 60deg;
|
|
}
|
|
75% {
|
|
--turn: -10deg;
|
|
}
|
|
80% {
|
|
--turn: 10deg;
|
|
}
|
|
85% {
|
|
--turn: 0deg;
|
|
}
|
|
100% {
|
|
--turn: 0deg;
|
|
}
|
|
} |