Раньше создавал анимацию просто добавлением класса, но сейчас я имею 37 элементов(анимация букв) и сделать это с каждой я считаю невозможно. Как мне сделать так, чтобы только при появлении элемента на экране начиналась анимация?
.animate span {
display: inline-block;
}
.animate span:nth-of-type(1) {
animation-delay: .01s;
}
.animate span:nth-of-type(2) {
animation-delay: .05s;
}
.animate span:nth-of-type(3) {
animation-delay: .1s;
}
.animate span:nth-of-type(4) {
animation-delay: .15s;
}
.animate span:nth-of-type(5) {
animation-delay: .2s;
}
.animate span:nth-of-type(6) {
animation-delay: .25s;
}
.animate span:nth-of-type(7) {
animation-delay: .3s;
}
.animate span:nth-of-type(8) {
animation-delay: .35s;
}
.animate span:nth-of-type(9) {
animation-delay: .4s;
}
.animate span:nth-of-type(10) {
animation-delay: .45s;
}
.animate span:nth-of-type(11) {
animation-delay: .5s;
}
.animate span:nth-of-type(12) {
animation-delay: .55s;
}
.animate span:nth-of-type(13) {
animation-delay: .6s;
}
.animate span:nth-of-type(14) {
animation-delay: .65s;
}
.animate span:nth-of-type(15) {
animation-delay: .7s;
}
.animate span:nth-of-type(16) {
animation-delay: .75s;
}
.animate span:nth-of-type(17) {
animation-delay: .8s;
}
.animate span:nth-of-type(18) {
animation-delay: .85s;
}
.animate span:nth-of-type(19) {
animation-delay: .9s;
}
.animate span:nth-of-type(20) {
animation-delay: .95s;
}
.animate span:nth-of-type(21) {
animation-delay: 1s;
}
.animate span:nth-of-type(22) {
animation-delay: 1.05s;
}
.animate span:nth-of-type(23) {
animation-delay: 1.1s;
}
.animate span:nth-of-type(24) {
animation-delay: 1.15s;
}
.animate span:nth-of-type(25) {
animation-delay: 1.2s;
}
.animate span:nth-of-type(26) {
animation-delay: 1.25s;
}
.animate span:nth-of-type(27) {
animation-delay: 1.3s;
}
.animate span:nth-of-type(28) {
animation-delay: 1.35s;
}
.animate span:nth-of-type(29) {
animation-delay: 1.4s;
}
.animate span:nth-of-type(30) {
animation-delay: 1.45s;
}
.animate span:nth-of-type(31) {
animation-delay: 1.5s;
}
.animate span:nth-of-type(32) {
animation-delay: 1.55s;
}
.animate span:nth-of-type(33) {
animation-delay: 1.6s;
}
.animate span:nth-of-type(34) {
animation-delay: 1.65s;
}
.animate span:nth-of-type(35) {
animation-delay: 1.7s;
}
.animate span:nth-of-type(36) {
animation-delay: 1.75s;
}
.animate span:nth-of-type(37) {
animation-delay: 1.8s;
}
.six span {
opacity: 0;
transform: rotate(-70deg) translate(65px, 0);
animation: text-animation .5s forwards;
}
@keyframes text-animation {
10% {
opacity: 1;
}
100% {
transform: rotate(0deg) translate(0);
opacity: 1;
}
}
<div class="animate six">
<span>М</span><span>ы</span> <span>д</span><span>е</span><span>л</span><span>а</span><span>е</span><span>м</span> <span>в</span><span>а</span><span>ш</span><span>у</span> <span>р</span><span>а</span><span>б</span><span>о</span><span>т</span><span>у</span> <span>б</span><span>ы</span><span>с</span><span>т</span><span>р</span><span>е</span><span>е</span> <span>и</span> <span>э</span><span>ф</span><span>ф</span><span>е</span><span>к</span><span>т</span><span>и</span><span>в</span><span>н</span><span>е</span><span>е</span>
</div>