Step 1
Create CSS property (better for animation)
@property --timer {
syntax: '<integer>';
inherits: false;
initial-value: 1;
}
Or just
:root { --timer: 1; }
Step 2
Animate property
@keyframes animate-letter {
to {
--timer: 26; /*26 - the number of letters of the English alphabet*/
}
}
Step 3
Add some counter magic
.letter {
counter-reset: timer var(--timer);
animation: animate-letter 2s linear infinite running;
}
.letter div:before{
content: counter(timer, lower-alpha);
}
lower-alpha - predefined counter styles
Now, at each step of the animation, the variable --timer will increase by 1 until it reaches 26. For each digit, the corresponding letter of the alphabet will be selected.
Step 4
Add more counters
.letter {
counter-reset: timer-1 calc(var(--timer) + 1) timer-2 calc(var(--timer) + 2) timer-3 calc(var(--timer) + 3) timer-4 calc(var(--timer) + 4) timer-5 calc(var(--timer) + 5) timer-6 calc(var(--timer) + 6) timer-7 calc(var(--timer) + 7) timer-8 calc(var(--timer) + 8) timer-9 calc(var(--timer) + 9) timer-10 calc(var(--timer) + 10);
animation: animate-letter 2s linear infinite running;
}
/*Add new counters, shifting each subsequent one by one*/
.letter div:before{
content: counter(timer-1, lower-alpha) counter(timer-2, lower-alpha) counter(timer-3, lower-alpha) counter(timer-4, lower-alpha) counter(timer-5, lower-alpha) counter(timer-6, lower-alpha) counter(timer-7, lower-alpha) counter(timer-8, lower-alpha) counter(timer-9, lower-alpha) counter(timer-10, lower-alpha);
writing-mode: vertical-rl;
text-orientation: upright;
}
/*Also directing text from top to bottom*/
Step 5
Add other effects and animations on the bite. And it's ready!
Top comments (1)
I loved this so much, I am trying to incorporate it within my portfolio. I am trying to limit this code to the main tag within my react model, but it goes over the whole page including both my header and footer component. Some guidance would be appreciated.