Не проигрывается анимация css

Question

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Viaoda+Libre&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Nunito:wght@700&family=Viaoda+Libre&display=swap');

.hello-text {
  font-family: 'Nunito', bold;
  font-size: 50px;
  position: absolute;
  top: 40%;
  left: 20px;
  background: rgb(176,33,226);
  background: linear-gradient(90deg, rgba(176,33,226,0.896796218487395) 21%, rgba(219,199,182,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: toTheLeft 2s;
}

.part2 {
  animation: fadeIn 2s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


@keyframes toTheLeft {
  0% {
    left: -1000px;
  }

  100% {
    left: 20px; /* Добавлены единицы (px) */
  }
}

 <body>
      <h1 class="hello-text">
        <span class='part1'>Привет, меня звать</span><br>
        <span class='part2'>флойдпавер</span>
      </h1>
  </body>

Не проигрывается анимация fadeIn у класса part2. Что можно сделать?

Answer 1

По правде, всё работает. Только вот этот режим не сильно радует браузер и он не рендерит ничего во время анимации. Но анимация происходит

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Viaoda+Libre&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Nunito:wght@700&family=Viaoda+Libre&display=swap');
.hello-text {
  font-family: 'Nunito', bold;
  font-size: 50px;
  position: absolute;
  top: 40%;
  left: 20px;
  background: rgb(176, 33, 226);
  background: linear-gradient(90deg, rgba(176, 33, 226, 0.896796218487395) 21%, rgba(219, 199, 182, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.part1,
.part2 {
  display: block;
}

.part1 {
  animation: toTheLeft 5s;
}

.part2 {
  animation: fadeIn 5s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes toTheLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

<body>
  <h1 class="hello-text">
    <span class='part1'>Привет, меня звать</span>
    <br>
    <span class='part2'>флойдпавер</span>
  </h1>
</body>

Этот цвет можно сделать разными способами и без этого свойства (или вообще не делать его). Вот пример анимации с отключёнными свойствами

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Viaoda+Libre&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Nunito:wght@700&family=Viaoda+Libre&display=swap');

.hello-text {
  font-family: 'Nunito', bold;
  font-size: 50px;
  position: absolute;
  top: 40%;
  left: 20px;
  background: rgb(176, 33, 226);
  background: linear-gradient(90deg, rgba(176, 33, 226, 0.896796218487395) 21%, rgba(219, 199, 182, 1) 100%);
}

.part1,
.part2 {
  display: inline-block;
}

.part1 {
  animation: toTheLeft 5s;
}

.part2 {
  animation: fadeIn 5s;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes toTheLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

<body>
  <h1 class="hello-text">
    <span class='part1'>Привет, меня звать</span>
    <br>
    <span class='part2'>флойдпавер</span>
  </h1>
</body>

Answer 2

как то так

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700&family=Viaoda+Libre&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Nunito:wght@700&family=Viaoda+Libre&display=swap');

.hello-text {
  font-family: 'Nunito', bold;
  /*font-size: 50px;*/
  position: absolute;
  /*top: 40%;*/
  left: 20px;
  background: rgb(176,33,226);
  background: linear-gradient(90deg, rgba(176,33,226,0.896796218487395) 21%, rgba(219,199,182,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: toTheLeft 2s;
}

.part2 {animation: fadeIn 2s 2s both;}/* !!!!!!!!!!!!!!!!
и кстати не зачем раздувать на несколько строк объявления с одним свойством */

@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}


@keyframes toTheLeft {
  0% {left: -1000px;}
  100% {left: 20px;}
}

<body>
      <ul class="hello-text">
        <li class='part1'>для начала отключить toTheLeft</li>
        <li class='part2'>или изменить время\задержку, ибо обнуление left с -1000px</li>
        <li>делает окно видимости элемента на последних 20% анимации, на большинстве расширений</li>
        <li>ну т.е. даже если она и работает, этого все равно не видно</li>
        <li>ибо анимируемый объект ~80% времени анимации вне вью порта</li>
        <li>ну а по итогу для fadeIn можно добавить animation-duration: 2s </li>
      </ul>
  </body>

БЛОГ НА HUSL

Не проигрывается анимация css

Ответы (2 шт):