Задать вопрос
@INTERNALINTERFERENCE
css

Как уместить анимацию на мобильных устройствах?

Я пытаюсь вывести текст на экран с анимацией. И если на пк все работает хорошо, то на телефоне, всё куда-то улетает. 

<div class="container text-uppercase">
        <p class="curley">Hello</p>
        <p class="web">Hello</p>
        <p class="dev">Hello</p>
        <div class="hide-text"></div>
</div>

CSS

:root {
}

body {
     background-color: black;
}

.container {
     margin-top: 350px;
     text-align: center;
}

p {
     font-family: "Orbitron", sans-serif !important;
     -webkit-text-stroke: 3px cyan;
     background: linear-gradient(darkred 30%, cyan, white, cyan, darkred 70%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     position: relative;
     display: inline-block;
     font-weight: 900;
     font-size: 4.1em;
     text-transform: uppercase;
     position: relative;
     filter: drop-shadow(0 0 1px black) drop-shadow(0 0 1px black) drop-shadow(0 0 1px black) drop-shadow(0 0 2px red) drop-shadow(0 0 2px red);
     opacity: 0;
}

.curley {
     left: 170px;
     bottom: 52px;
     animation: bg-shift 1s infinite linear alternate, scale 750ms ease-in forwards 3.5s, jump 500ms ease-out forwards 5.7s, blur-in 300ms linear 3.5s,
          zoom 4s ease-in-out 6.25s, flip 500ms linear forwards 8s;
}

.web {
     right: 170px;
     animation: bg-shift 1s infinite linear alternate, scale-angle1 3s ease-in-out forwards 2s, blur-in 500ms linear 2s, rotate-up1 250ms ease-out forwards 5.7s,
          zoom 1.5s ease-in-out 6.25s, flip 500ms linear forwards 8.5s;
}

.dev {
     right: 175px;
     animation: bg-shift 1s infinite linear alternate, scale-angle2 3s ease-in-out forwards 2s, blur-in 500ms linear 2s, rotate-up2 250ms ease-out forwards 5.7s,
          zoom 1.5s ease-in-out 6.25s, flip 500ms linear forwards 8.5s;
}

@keyframes bg-shift {
     from {
          background-position: 0 125px;
     }
     to {
     }
}

@keyframes scale-angle1 {
     0% {
          opacity: 1;
          transform: scale(0) perspective(400px) rotateY(-45deg);
     }
     50% {
          transform: scale(1) perspective(400px) rotateY(-45deg);
     }
     75% {
          transform: scale(1) perspective(150px) rotateY(360deg);
     }
     100% {
          opacity: 1;
          transform: scale(1) rotateY(0deg);
     }
}

@keyframes scale-angle2 {
     0% {
          opacity: 1;
          transform: scale(0) perspective(400px) rotateY(45deg);
     }
     50% {
          transform: scale(1) perspective(400px) rotateY(45deg);
     }
     75% {
          transform: scale(1) perspective(150px) rotateY(-360deg);
     }
     100% {
          opacity: 1;
          transform: scale(1) rotateY(0deg);
     }
}

@keyframes blur-in {
     from {
          filter: blur(100px);
     }
     to {
          filter: blur(0);
     }
}

@keyframes scale {
     0% {
          opacity: 1;
          transform: scale(0) translateY(-500px);
     }
     85% {
          transform: scale(1) translateY(0);
     }
     95% {
          transform: translateY(-25px);
     }
     100% {
          opacity: 1;
          transform: translateY(0);
     }
}

@keyframes jump {
     0% {
          transform: scale(0) translateY(0px);
     }
     25% {
          transform: scale(1) translateY(-200px);
     }
     75% {
          transform: scale(1) translateY(0px);
     }
     85% {
          transform: translateY(-25px);
     }
     100% {
          opacity: 1;
          transform: translateY(0);
     }
}

@keyframes rotate-up1 {
     0% {
          transform: rotatez(0deg);
     }
     50% {
          transform: rotatez(-40deg);
     }
     100% {
          transform: rotatez(0deg);
     }
}

@keyframes rotate-up2 {
     0% {
          transform: rotatez(0deg);
     }
     50% {
          transform: rotatez(40deg);
     }
     100% {
          transform: rotatez(0deg);
     }
}

@keyframes flip {
     0% {
          transform: rotatex(0deg);
     }
     50% {
          transform: rotatex(360deg);
     }
     100% {
          transform: rotatex(90deg);
          filter: blur(20px) drop-shadow(0 0 5px cyan) drop-shadow(0 0 25px red);
     }
}

@keyframes zoom {
     0% {
          transform: scale(1) perspective(600px) rotatey(0deg);
     }
     50% {
          transform: scale(0.3) perspective(600px) rotatey(3600deg);
     }
     100% {
          transform: scale(1) perspective(600px) rotatey(0deg);
     }
}

  • Вопрос задан
  • 62 просмотра
Комментировать
Подписаться 1 Простой Комментировать
Решение пользователя Dino Winchester К ответам на вопрос (2)
mizutsune
@mizutsune
I will live forever in the flame of your eyes.
Для начала у элементов curley, web, dev, уберите свойства: left, right, bottom. Далее можно немного подправить остальные стили у элементов + немного изменить разметку и ситуация улучшится.

<div class="container text-uppercase">
    <p class="text curley">Hello</p>
    <div class="group">
      <p class="text web">Hello</p>
      <p class="text dev">Hello</p>
    </div>
    <div class="hide-text"></div>
  </div>


.container {
     width: 100%;
     max-width: 600px;
     margin: 0 auto;
}

.text {
     --sw-1: drop-shadow(0 0 1px black);
     --sw-2: drop-shadow(0 0 2px red);
     font-family: "Orbitron", sans-serif;
     background: linear-gradient(darkred 30%, cyan, white, cyan, darkred 70%);
     -webkit-text-stroke: 3px cyan;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-weight: 900;
     font-size: 4.1em;
     text-align: center;
     text-transform: uppercase;
     filter: var(--sw-1) var(--sw-1) var(--sw-2) var(--sw-2);
     opacity: 0;
     margin: 0;
}

.group {
     display: flex;
     gap: 10px;
     justify-content: center;
}

.curley {
     animation: bg-shift 1s infinite linear alternate, 
                scale 750ms ease-in forwards 3.5s, 
                jump 500ms ease-out forwards 5.7s, 
                blur-in 300ms linear 3.5s,
                zoom 4s ease-in-out 6.25s, 
                flip 500ms linear forwards 8s;
}

.web {
     animation: bg-shift 1s infinite linear alternate, 
                scale-angle1 3s ease-in-out forwards 2s, 
                blur-in 500ms linear 2s, 
                rotate-up1 250ms ease-out forwards 5.7s,
                zoom 1.5s ease-in-out 6.25s, 
                flip 500ms linear forwards 8.5s;
}

.dev {
     animation: bg-shift 1s infinite linear alternate, 
                scale-angle2 3s ease-in-out forwards 2s, 
                blur-in 500ms linear 2s, 
                rotate-up2 250ms ease-out forwards 5.7s,
                zoom 1.5s ease-in-out 6.25s, 
                flip 500ms linear forwards 8.5s;
}

/*  Код анимаций без изменений */


Размер шрифта скорее всего придётся уменьшать через @media запросы, чтобы на мобильниках всё нормально отображалось. Но в целом ваши анимации и стили можно и нужно улучшить.
Ответ написан
Комментировать
Комментировать