<!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="hello-text"> <span class='part1'>Привет, меня звать</span><br> <span class='part2'>флойдпавер</span> </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="hello-text"> <span class='part1'>Привет, меня звать</span><br> <span class='part2'>флойдпавер</span> </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 { font-family: 'Nunito', bold; font-size: 50px; position: absolute; top: 40%; left: 20px; background: rgb(176,33,226); background: linear-gradient(90deg, rgba(176,33,226,0.896796218487395) 21%, rgba(219,199,182,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .part1 { animation: toTheLeft 2s; } .part2 { animation: fadeIn 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes toTheLeft { 0% { left: -1000px; } 100% { left: 20px; /* Добавлены единицы (px) */ } } 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 { font-family: 'Nunito', bold; font-size: 50px; position: absolute; top: 40%; left: 20px; background: rgb(176,33,226); background: linear-gradient(90deg, rgba(176,33,226,0.896796218487395) 21%, rgba(219,199,182,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .part1 { animation: toTheLeft 2s; } .part2 { animation: fadeIn 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes toTheLeft { 0% { left: -1000px; } 100% { left: 20px; /* Добавлены единицы (px) */ } } не анимируется спан с классом парт1 и парт2.
floydpower, проблема с анимацией спанов с классами "part1" и "part2" может быть вызвана неправильным указанием единиц измерения в CSS-правилах анимации. В CSS-коде, который вы предоставили, отсутствуют единицы измерения для свойств "left" и "font-size". Попробуйте добавить единицы измерения "px" к этим свойствам, как показано ниже: .hello-text { font-family: 'Nunito', bold; font-size: 50px; position: absolute; top: 40%; left: 20px; background: rgb(176,33,226); background: linear-gradient(90deg, rgba(176,33,226,0.896796218487395) 21%, rgba(219,199,182,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .part1 { animation: toTheLeft 2s; } .part2 { animation: fadeIn 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes toTheLeft { 0% { left: -1000px; } 100% { left: 20px; } } CSS .hello-text { font-family: 'Nunito', bold; font-size: 50px; position: absolute; top: 40%; left: 20px; background: rgb(176,33,226); background: linear-gradient(90deg, rgba(176,33,226,0.896796218487395) 21%, rgba(219,199,182,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .part1 { animation: toTheLeft 2s; } .part2 { animation: fadeIn 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes toTheLeft { 0% { left: -1000px; } 100% { left: 20px; } } После внесения этих изменений анимация должна работать должным образом. Попробуйте это и дайте мне знать, если у вас возникнут еще какие-либо проблемы.
floydpower, извините за путаницу. Я заметил еще одну проблему в вашем коде. В CSS-правиле для класса ".hello-text" вы указали неправильное значение для свойства "font-family". Вместо "bold" нужно указать "bold" или "700". Попробуйте исправить это, как показано ниже: .hello-text { font-family: 'Nunito', bold; font-size: 50px; position: absolute; top: 40%; left: 20px; background: rgb(176,33,226); background: linear-gradient(90deg, rgba(176,33,226,0.896796218487395) 21%, rgba(219,199,182,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .part1 { animation: toTheLeft 2s; } .part2 { animation: fadeIn 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes toTheLeft { 0% { left: -1000px; } 100% { left: 20px; } } CSS .hello-text { font-family: 'Nunito', bold; font-size: 50px; position: absolute; top: 40%; left: 20px; background: rgb(176,33,226); background: linear-gradient(90deg, rgba(176,33,226,0.896796218487395) 21%, rgba(219,199,182,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .part1 { animation: toTheLeft 2s; } .part2 { animation: fadeIn 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes toTheLeft { 0% { left: -1000px; } 100% { left: 20px; } } После внесения этого изменения анимация должна работать должным образом. Попробуйте это и дайте мне знать, если у вас возникнут еще какие-либо проблемы.
floydpower, извините за неудобства. Я заметил еще одну проблему в вашем коде. В CSS-правиле для класса ".hello-text" вы указали неправильное значение для свойства "font-family". Вместо "bold" нужно указать "Nunito", "Comfortaa" или другой шрифт, который вы хотите использовать. Попробуйте исправить это, как показано ниже: .hello-text { font-family: 'Nunito', 'Comfortaa', sans-serif; font-size: 50px; position: absolute; top: 40%; left: 20px; background: rgb(176,33,226); background: linear-gradient(90deg, rgba(176,33,226,0.896796218487395) 21%, rgba(219,199,182,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .part1 { animation: toTheLeft 2s; } .part2 { animation: fadeIn 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes toTheLeft { 0% { left: -1000px; } 100% { left: 20px; } } CSS .hello-text { font-family: 'Nunito', 'Comfortaa', sans-serif; font-size: 50px; position: absolute; top: 40%; left: 20px; background: rgb(176,33,226); background: linear-gradient(90deg, rgba(176,33,226,0.896796218487395) 21%, rgba(219,199,182,1) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .part1 { animation: toTheLeft 2s; } .part2 { animation: fadeIn 2s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes toTheLeft { 0% { left: -1000px; } 100% { left: 20px; } } После внесения этого изменения анимация должна работать должным образом. Попробуйте это и дайте мне знать, если у вас возникнут еще какие-либо проблемы.