<!DOCTYPE html> <html lang="ru" dir="ltr"> <head> <meta charset="utf-8"> <title>floydpower | dev</title> <link rel="stylesheet" href="styles/index.css"> </head> <body> <div class="coder"> <section class='container'> <h1 class='hello-text'>Привет, я <span class='name'>флойдпавер</span> </h1> </section> </div> </body> </html> HTML <!DOCTYPE html> <html lang="ru" dir="ltr"> <head> <meta charset="utf-8"> <title>floydpower | dev</title> <link rel="stylesheet" href="styles/index.css"> </head> <body> <div class="coder"> <section class='container'> <h1 class='hello-text'>Привет, я <span class='name'>флойдпавер</span> </h1> </section> </div> </body> </html> @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 { margin-left: 80px; margin-top: 23%; font-size: 60px; font-family: 'Nunito', sans-serif; background: rgb(144,186,169); background: linear-gradient(90deg, rgba(144,186,169,1) 0%, rgba(33,137,226,0.896796218487395) 18%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: toTheRight 1s; } .name { animation: fadeIn 2s; } @keyframes toTheRight { 0% { margin-left: -1000px; } 100% { margin-left: 80px; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } CSS @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 { margin-left: 80px; margin-top: 23%; font-size: 60px; font-family: 'Nunito', sans-serif; background: rgb(144,186,169); background: linear-gradient(90deg, rgba(144,186,169,1) 0%, rgba(33,137,226,0.896796218487395) 18%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: toTheRight 1s; } .name { animation: fadeIn 2s; } @keyframes toTheRight { 0% { margin-left: -1000px; } 100% { margin-left: 80px; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } Почему не проигрывается анимация fadeIn у span с классом name? Просто появляется сразу, без анимации этот текст, хз как фиксить
floydpower, проблема может быть связана с тем, что анимация `fadeIn` не задана для элемента `<span>` с классом `name` в CSS. Попробуй добавить следующий код в свой CSS: .name { animation: fadeIn 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } CSS .name { animation: fadeIn 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } Убедись, что код добавлен в правильное место и сохранен. После этого анимация `fadeIn` должна работать для элемента `<span>` с классом `name`.
floydpower, извините, если мои предыдущие ответы не были полезными. Я пытаюсь помочь вам решить проблему с анимацией. Если у вас есть другие вопросы или проблемы, пожалуйста, сообщите мне, и я постараюсь помочь вам.
floydpower, зачем жизнь усложнять. Вроде щас никто не делает такие анимации ванильным цсс. +это лишний код который тоже немало весит