Анимация текста в CSS

Здравствуйте, ребята, сегодня я собираюсь показать вам несколько CSS-анимаций текста. Все анимации, которые я показываю, имеют похожий код, и после понимания этих анимаций вы сможете легко создать свою собственную анимацию.

Давайте начнем…

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

Что такое var в CSS?

Функция var() используется для вставки значения переменной CSS.
Если вы зададите элементу значение типа «—i:1», это будет означать, что у этого элемента есть переменная «i» со значением «1».
Мы можем получить доступ к этой переменной с помощью функции var().

  • Я собираюсь объяснить одну анимацию, потому что другие анимации похожи, и вы легко поймете их.

Анимация — 1

В этой анимации мы создадим текстовую анимацию типа «пузырьки».

HTML

<ul class="container">
  <li style="--i:1">A</li>
  <li style="--i:1.3">N</li>
  <li style="--i:1.6">I</li>
  <li style="--i:1.9">M</li>
  <li style="--i:2.2">A</li>
  <li style="--i:2.5">T</li>
  <li style="--i:2.8">I</li>
  <li style="--i:3.1">O</li>
  <li style="--i:3.4">N</li>
</ul>
Вход в полноэкранный режим Выход из полноэкранного режима
  • Мы создали элемент ul и внутри него создали элементы li для каждого алфавита и снабдили каждый элемент li переменной «i» с различными значениями.

css

.container {
  display: flex;
  justify-content: center;
  font-size: 3rem;
  list-style-type: none;
  display: flex;
  gap: 20px;
}

/* <!-- Using the custom property `--i` to calculate the animation duration. --> */
li {
  animation-name: bubbly;
  animation-duration: calc(var(--i) * 1s);
   animation-fill-mode:forwards;
  animation-timing-function:ease-in-out
}

/* keyframes */
@keyframes bubbly {
  0% {
    opacity: 0;
    /* transform: translateY(-100px); */
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 1;
    /* transform: translateY(0); */
    transform: scale(1);
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима
  • Сначала мы стилизовали элемент контейнера с помощью некоторых свойств.
  • Затем мы задали имя анимации элементу li, эта анимация будет применена ко всем элементам li.
  • Далее начинается самое интересное, мы использовали функцию calc(). Функция calc() выполняет вычисление, которое будет использоваться в качестве значения свойства.
  • Внутри calc() мы использовали нашу переменную «i» с помощью функции var(). Она будет использовать значение переменной «i» и устанавливать продолжительность анимации с этим значением, поэтому продолжительность анимации всех элементов li будет разной.
  • Затем внутри ключевых кадров мы определили нашу анимацию.

Некоторые другие анимации с их результатом —

Анимация 1 —

Анимация 2 —

Анимация 3 —

Анимация 4 —

Анимация 5 —

Анимация 6 —

Анимация 7 —

Анимация 8 —

СПАСИБО, ЧТО ПРОВЕРИЛИ ЭТОТ ПОСТ

Вы можете связаться со мной на —
Instagram — https://www.instagram.com/supremacism__shubh/
LinkedIn — https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email — shubhmtiwri00@gmail.com

Вы можете помочь мне пожертвованием по ссылке ниже Спасибо👇👇👇 ^^
☕ —> https://www.buymeacoffee.com/waaduheck <—.

Также проверьте эти посты
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Оцените статью
devanswers.ru
Добавить комментарий