Выберите нужный эффект из списка. Обновите страницу для просмотра
Добавьте стиль
вашему тексту в зеро "youxagency"
Скопируйте один из скриптов ниже и вставьте на страницу в блок "T123"
<!-- Добавляем нестандартные эффекты появления текста в Тильда -->
<!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->
<style>
.youxagency {
animation: slideInBlurred 1s forwards;
}
@keyframes slideInBlurred {
from {
opacity: 0;
transform: translateX(-50px) rotate(15deg);
filter: blur(10px);
}
to {
opacity: 1;
transform: translateX(0) rotate(0);
filter: blur(0);
}
}
</style>
<!-- Добавляем нестандартные эффекты появления текста в Тильда -->
<!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->
<style>
.youxagency {
animation: bounceIn 1s forwards;
}
@keyframes bounceIn {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(1.05);
}
70% {
transform: scale(0.9);
}
100% {
transform: scale(1);
opacity: 1;
}
}
</style>
<!-- Добавляем нестандартные эффекты появления текста в Тильда -->
<!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->
<style>
.youxagency {
animation: flipIn 1s forwards;
}
@keyframes flipIn {
from {
transform: rotateY(90deg);
opacity: 0;
}
to {
transform: rotateY(0);
opacity: 1;
}
}
</style>
<!-- Добавляем нестандартные эффекты появления текста в Тильда -->
<!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->
<style>
.youxagency {
animation: flickerAndFade 2s ease-in-out forwards;
opacity: 0;
}
@keyframes flickerAndFade {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
50% {
opacity: 0;
}
75% {
opacity: 1;
}
100% {
opacity: 1;
}
}
</style>
<!-- Добавляем нестандартные эффекты появления текста в Тильда -->
<!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->
<style>
.youxagency {
animation: textWave 5s linear forwards;
}
@keyframes textWave {
0% {
letter-spacing: 2px;
transform: rotate(-2deg);
}
20% {
letter-spacing: 4px;
transform: rotate(2deg);
}
40% {
letter-spacing: 2px;
transform: rotate(-2deg);
}
60% {
letter-spacing: 4px;
transform: rotate(2deg);
}
80% {
letter-spacing: 2px;
transform: rotate(-2deg);
}
100% {
letter-spacing: 0px;
transform: rotate(0deg);
}
}
</style>
<!-- Добавляем нестандартные эффекты появления текста в Тильда -->
<!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->
<style>
.youxagency {
animation: floatingLetters 5s ease-in-out;
}
@keyframes floatingLetters {
0% {
transform: translateY(0);
}
25% {
transform: translateY(-10px);
}
50% {
transform: translateY(0);
}
75% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
</style>
<!-- Добавляем нестандартные эффекты появления текста в Тильда -->
<!-- https://youx.agency/effekty-poyavleniya-dlya-teksta-v-tilda -->
<style>
.youxagency {
animation: flipping 2s ease-in-out ;
}
@keyframes flipping {
0% {
transform: rotateX(0deg);
}
100% {
transform: rotateX(360deg);
}
}
</style>