Анимация появления текста в Тильде

Главная

Блог

Анимация текста в Тильде

Чтобы создать анимацию текста в Тильде, необходимо создать ZeroBlock, и выбрать элемент текст, написать любой текст. Далее потребуется вставить html код в блок Т123 из библиотеки tilda. Публикуем страницу и нажимаем инструменты разработчика, нам нужно найти нужный css класс элемента, скопировать его и подставить в код. Можно проделывать эту операцию для нескольких текстов. Снова публикуем и у нас получилась интересная анимация текста в Тильде. Пользуйтесь в своих проектах!

Инструкция:

Код запускающий эффект текста в тильде


<!--Заменяем класс элемента текста на свой -->

<style>
 .tn-elem__3408491231627565840845 {
  animation: an 1.8s ease-out 1 both;
            animation-delay:1.5s;
            display: inline-block;
        }

        @keyframes an{
            from{
                opacity: 0;
                transform: perspective(400px) translate3d(50px, 20px, 200px) rotate3d(40, 0, 0, 80deg);
            }
            to{
                opacity: 1;
                transform: perspective(400px) translate3d(0, 0, 0);
            }
        }

</style>

Пример эффекта текста

Обновите страницу