Как сделать, чтобы opacity у элемента появлялась плавно слева на право?

Рейтинг: 0Ответов: 1Опубликовано: 19.02.2023

Есть текст, который появляется при отображении на экране, надо чтобы он появлялся без перемещений, но с плавным opacity от начала блока с текстом до конца.

.showing-text {
  position: relative;
  margin-left: 7rem;
  max-width: 40%;
  animation: 3s opanimation;
}

.showing-text p {
  color: #d0d0d0;
  font-size: 1.5rem;
  font-weight: 600;
}

.show {
  content: '';
  margin-top: 20rem;
  color: #d0d0d0;
  position: absolute;
  top: 0;
  left: 0;
}

@keyframes opanimation {
 from {
    width: 0;
    opacity: 0;
 }
 30% {
    width: 20%;
    opacity: 0;
 }
 to {
    width: 100%;
    opacity: 1;
 }
}
<section class="showing-text">
  <p>Some text</p>
</section>

css css-animation
Источник: Stack Overflow на русском

Ответы

▲ 1

section {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-around;
  align-items: center;
}

.showing-text {
  font: 36px/1em 'Arial Black', sans-serif;
  display: inline-block;
  color: transparent;
  background-repeat: no-repeat;
  background-size: 300% 100%;
  background-image: linear-gradient(-90deg, #0000 0 35%, #000 65%);
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: showing-text 4s linear forwards;
}

.showing-text.color {
  background-image: linear-gradient(-90deg, #0000 0 35%, #00f 65% 70%, #080 75% 80%, #fc0 85% 90%, #f00 95% 100%);
}

@keyframes showing-text { to { background-position: 0 0; } }
<section>
  <p class="showing-text">Some black text</p>
  <p class="showing-text color">Some color text</p>
</section>