Итак, я пытаюсь найти предложение, в котором определенные слова анимированы (повернуты) - я подумал, что это работает, но как только я просмотрел сайт на своем мобильном телефоне, я обнаружил проблему.При просмотре на рабочем столе (и даже внутри инструментов разработчика) анимированный текст отображается в правильном размере.Однако, как только я смотрю его на мобильном устройстве (iPhone), текст становится очень маленьким
Я также использую загрузчик на странице, поэтому я подумал, что, возможно, что-то было переопределено.Но, как вы можете видеть, я в основном удалил все классы начальной загрузки, и он все еще не работает.
.animated span {
color: #007bff;
font-size: 0;
opacity: 0;
-ms-animation: topToBottom 10s infinite;
-webkit-animation: topToBottom 10s infinite;
animation: topToBottom 10s infinite;
}
.animated span:nth-child(2) {
-ms-animation-delay: 2s;
-webkit-animation-delay: 2s;
animation-delay: 2s;
}
.animated span:nth-child(3) {
-ms-animation-delay: 4s;
-webkit-animation-delay: 4s;
animation-delay: 4s;
}
.animated span:nth-child(4) {
-ms-animation-delay: 6s;
-webkit-animation-delay: 6s;
animation-delay: 6s;
}
.animated span:nth-child(5) {
-ms-animation-delay: 8s;
-webkit-animation-delay: 8s;
animation-delay: 8s;
}
@-webkit-keyframes topToBottom {
0%,
20% {
font-size: 2.5rem;
opacity: 1;
}
/* visible for 1s */
20.01%,
100% {
opacity: 0;
font-size: 0rem;
}
<h1 class=" cover-heading animated">TribePulse replaces <br />
<span>status updates</span>
<span>engagement surveys</span>
<span>progress reports</span>
<span>status meetings</span>
<span>EoD emails</span>
</h1>
Демонстрация по сбоям: https://empty -cemetery.glitch.me / Когда вы просматриваете его на рабочем столе, все синее написаноправильный размер.Однако, как только вы просматриваете его на мобильном устройстве, анимированный текст становится крошечным.
Любая помощь будет принята с благодарностью!пытаюсь это исправить часами и просто не знаю, что еще я могу попробовать ..