Почему анимация CSS идет в обратную сторону(справа налево) и как это исправить?

CSS, HTML, PHP
1 комментарий

Почему анимация CSS идет в обратную сторону(справа налево) и как это исправить? Речь о @keyframes homeBgText

&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;     &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;     &lt;title&gt;Portfolio by Malyshenko Nikita&lt;/title&gt;     &lt;link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'&gt;     &lt;link rel="stylesheet" href="./styles/style.css"&gt; &lt;/head&gt; &lt;body&gt;     &lt;!-- header --&gt;     &lt;header class="header"&gt;         &lt;a href="#" class="header__logo"&gt;Nikita.&lt;/a&gt;          &lt;nav class="header__menu"&gt;             &lt;ul class="header__list"&gt;                 &lt;li class="header__item"&gt;                     &lt;a href="#home" class="header__link active"&gt;Home&lt;/a&gt;                 &lt;/li&gt;                 &lt;li class="header__item"&gt;                     &lt;a href="#about" class="header__link"&gt;About&lt;/a&gt;                 &lt;/li&gt;                 &lt;li class="header__item"&gt;                     &lt;a href="#education" class="header__link"&gt;Education&lt;/a&gt;                 &lt;/li&gt;                 &lt;li class="header__item"&gt;                     &lt;a href="#skills" class="header__link"&gt;Skills&lt;/a&gt;                 &lt;/li&gt;             &lt;/ul&gt;         &lt;/nav&gt;     &lt;/header&gt;      &lt;!-- home --&gt;     &lt;section class="home" id="home"&gt;         &lt;div class="home__content"&gt;             &lt;h1 class="home__title"&gt;Hi, I'm &lt;span&gt;Nikita Malyshenko&lt;/span&gt;&lt;/h1&gt;             &lt;div class="home__text-animate"&gt;                 &lt;h3&gt;Frontend Developer&lt;/h3&gt;             &lt;/div&gt;             &lt;p class="home__text"&gt;                 I'm a junior Frontend developer. I can create a website for your ideas and preferences.             &lt;/p&gt;              &lt;div class="home__buttons buttons"&gt;                 &lt;a href="#" class="home__button btn"&gt;Hire me&lt;/a&gt;                 &lt;a href="#" class="home__button btn"&gt;Let's Talk&lt;/a&gt;             &lt;/div&gt;         &lt;/div&gt;          &lt;ul class="home__contacts"&gt;             &lt;li class="home__contact"&gt;                 &lt;a href="#" class="home__contact-link"&gt;&lt;i class='bx bxl-vk' &gt;&lt;/i&gt;&lt;/a&gt;             &lt;/li&gt;             &lt;li class="home__contact"&gt;                 &lt;a href="#" class="home__contact-link"&gt;&lt;i class='bx bxl-telegram' &gt;&lt;/i&gt;&lt;/a&gt;             &lt;/li&gt;         &lt;/ul&gt;          &lt;div class="home__imgHover"&gt;&lt;/div&gt;     &lt;/section&gt;      &lt;script src="./scripts/index.js"&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;

1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Portfolio by Malyshenko Nikita</title> <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> <link rel="stylesheet" href="./styles/style.css"> </head> <body>  <header class="header"> <a href="#" class="header__logo">Nikita.</a> <nav class="header__menu"> <ul class="header__list"> <li class="header__item"> <a href="#home" class="header__link active">Home</a> </li> <li class="header__item"> <a href="#about" class="header__link">About</a> </li> <li class="header__item"> <a href="#education" class="header__link">Education</a> </li> <li class="header__item"> <a href="#skills" class="header__link">Skills</a> </li> </ul> </nav> </header>  <section class="home" id="home"> <div class="home__content"> <h1 class="home__title">Hi, I'm <span>Nikita Malyshenko</span></h1> <div class="home__text-animate"> <h3>Frontend Developer</h3> </div> <p class="home__text"> I'm a junior Frontend developer. I can create a website for your ideas and preferences. </p> <div class="home__buttons buttons"> <a href="#" class="home__button btn">Hire me</a> <a href="#" class="home__button btn">Let's Talk</a> </div> </div> <ul class="home__contacts"> <li class="home__contact"> <a href="#" class="home__contact-link"><i class='bx bxl-vk' ></i></a> </li> <li class="home__contact"> <a href="#" class="home__contact-link"><i class='bx bxl-telegram' ></i></a> </li> </ul> <div class="home__imgHover"></div> </section> <script src="./scripts/index.js"></script> </body> </html>

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&amp;display=swap');  * {     margin: 0;     padding: 0;     box-sizing: border-box;     text-decoration: none;     border: none;     outline: none;     scroll-behavior: smooth;     font-family: 'Poppins';     color: inherit;     list-style: none; }  :root {     --bg-color:   #29010c;     --second-bg-color: #590219;     --text-color: #fd7b7c;     --main-color: #f80000; }  /* html {     overflow-x: hidden; } */  body {     background-color: var(--bg-color);     color: var(--text-color); }  section {     min-height: 100vh;     padding: 100px 150px 30px; }  .buttons {     width: 450px;     display: flex;     justify-content: space-between; }  .btn {     position: relative;     width: 200px;     height: 60px;     display: inline-flex;     justify-content: center;     align-items: center;     border: 3px solid var(--main-color);     border-radius: 6px;     font-size: 20px;     font-weight: 600;     z-index: 1;     letter-spacing: 2.5px;     color: var(--bg-color);     background-color: var(--main-color);     transition: all .5s; }  .btn::before{     content: '';     position: absolute;     left: 0;     top: 0;     width: 0;     height: 100%;     background-color: var(--bg-color);     z-index: -1;     transition: all .5s; }  .btn:hover{     color: var(--main-color); }  .btn:hover::before{     width: 100%; }  .btn:nth-child(2) {     background-color: transparent;     color: var(--main-color); }  .btn:nth-child(2)::before {     background-color: var(--main-color); }  .btn:nth-child(2):hover {     color: var(--bg-color); }  /* header */ .header {     position: fixed;     width: 100%;     padding: 30px 150px;     background-color: transparent;     display: flex;     justify-content: space-between;     align-items: center;     z-index: 100;     transition: all .3s; }  .header.sticky {     background-color: var(--bg-color); }  .header__logo {     font-size: 30px;     font-weight: 700; }  .header__list {     display: flex; }  .header__item + .header__item {     margin-left: 40px; }  .header__link {     font-size: 20px;     font-weight: 500;     transition: all .3s; }  .header__link:hover, .header__link.active {     color: var(--main-color); }  /* home */ .home {     display: flex;     align-items: center;     background-image: url('../images/home.png');     background-repeat: no-repeat;     background-position: right;     border-bottom: 2px solid var(--main-color); }  .home__content {     max-width: 650px; }  .home__title {     font-size: 50px;     line-height: 1.3;     font-weight: 700; }  .home__text-animate {     position: relative; }  .home__text-animate h3 {     font-size: 30px;     font-weight: 700;     -webkit-text-stroke: .7px var(--main-color);     color: transparent;     background-image: linear-gradient(var(--main-color), var(--main-color));     background-repeat: no-repeat;     -webkit-background-clip: text;     background-position: 0 0;     animation: homeBgText 6s linear infinite;     animation-delay: 2s; }  .home__text-animate h3::before {     content: '';     position: absolute;     top: 0;     left: 0;     width: 0;     height: 100%;     border-right: 2px solid var(--main-color);     z-index: -1;  }  .home__text {     font-size: 20px;     margin: 25px 0 50px; }  .home__contacts {     position: absolute;     bottom: 50px;     display: flex;     justify-content: space-between;     width: 180px; }  .home__contact-link {     display: inline-flex;     justify-content: center;     align-items: center;     width: 70px;     height: 70px;     border: 3px solid var(--main-color);     border-radius: 50%;     font-size: 30px;     position: relative;     z-index: 1;     overflow: hidden;     color: var(--main-color);     transition: all .5s; }  .home__contact-link:hover {     color: var(--bg-color); }  .home__contact-link::before {     content: '';     position: absolute;     top: 0;     left: 0;     width: 0;     border-radius: 50%;     height: 100%;     background-color: var(--main-color);     transition: all .5s;     z-index: -1; }  .home__contact-link:hover::before {     width: 100%; }  .home__imgHover {     position: absolute;     top: 0;     right: 0;     width: 45%;     height: 100%;     background-color: transparent;     transition: 3s; }  .home__imgHover:hover {     background-color: var(--bg-color);     opacity: .7;     box-shadow: 0 0 100px var(--main-color); }  /* keyframes animation */ @keyframes homeBgText {     0%, 10%, 100% {         background-position:  -15rem 0;     }      65%, 85% {         background-position:  20rem 0;     } }  @keyframes aboutSpinner {     100% {         transform: translate(-50%, -50%) rotate(360deg);     } }

1

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; border: none; outline: none; scroll-behavior: smooth; font-family: 'Poppins'; color: inherit; list-style: none; } :root { --bg-color: #29010c; --second-bg-color: #590219; --text-color: #fd7b7c; --main-color: #f80000; } /* html { overflow-x: hidden; } */ body { background-color: var(--bg-color); color: var(--text-color); } section { min-height: 100vh; padding: 100px 150px 30px; } .buttons { width: 450px; display: flex; justify-content: space-between; } .btn { position: relative; width: 200px; height: 60px; display: inline-flex; justify-content: center; align-items: center; border: 3px solid var(--main-color); border-radius: 6px; font-size: 20px; font-weight: 600; z-index: 1; letter-spacing: 2.5px; color: var(--bg-color); background-color: var(--main-color); transition: all .5s; } .btn::before{ content: ''; position: absolute; left: 0; top: 0; width: 0; height: 100%; background-color: var(--bg-color); z-index: -1; transition: all .5s; } .btn:hover{ color: var(--main-color); } .btn:hover::before{ width: 100%; } .btn:nth-child(2) { background-color: transparent; color: var(--main-color); } .btn:nth-child(2)::before { background-color: var(--main-color); } .btn:nth-child(2):hover { color: var(--bg-color); } /* header */ .header { position: fixed; width: 100%; padding: 30px 150px; background-color: transparent; display: flex; justify-content: space-between; align-items: center; z-index: 100; transition: all .3s; } .header.sticky { background-color: var(--bg-color); } .header__logo { font-size: 30px; font-weight: 700; } .header__list { display: flex; } .header__item + .header__item { margin-left: 40px; } .header__link { font-size: 20px; font-weight: 500; transition: all .3s; } .header__link:hover, .header__link.active { color: var(--main-color); } /* home */ .home { display: flex; align-items: center; background-image: url('../images/home.png'); background-repeat: no-repeat; background-position: right; border-bottom: 2px solid var(--main-color); } .home__content { max-width: 650px; } .home__title { font-size: 50px; line-height: 1.3; font-weight: 700; } .home__text-animate { position: relative; } .home__text-animate h3 { font-size: 30px; font-weight: 700; -webkit-text-stroke: .7px var(--main-color); color: transparent; background-image: linear-gradient(var(--main-color), var(--main-color)); background-repeat: no-repeat; -webkit-background-clip: text; background-position: 0 0; animation: homeBgText 6s linear infinite; animation-delay: 2s; } .home__text-animate h3::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 100%; border-right: 2px solid var(--main-color); z-index: -1; } .home__text { font-size: 20px; margin: 25px 0 50px; } .home__contacts { position: absolute; bottom: 50px; display: flex; justify-content: space-between; width: 180px; } .home__contact-link { display: inline-flex; justify-content: center; align-items: center; width: 70px; height: 70px; border: 3px solid var(--main-color); border-radius: 50%; font-size: 30px; position: relative; z-index: 1; overflow: hidden; color: var(--main-color); transition: all .5s; } .home__contact-link:hover { color: var(--bg-color); } .home__contact-link::before { content: ''; position: absolute; top: 0; left: 0; width: 0; border-radius: 50%; height: 100%; background-color: var(--main-color); transition: all .5s; z-index: -1; } .home__contact-link:hover::before { width: 100%; } .home__imgHover { position: absolute; top: 0; right: 0; width: 45%; height: 100%; background-color: transparent; transition: 3s; } .home__imgHover:hover { background-color: var(--bg-color); opacity: .7; box-shadow: 0 0 100px var(--main-color); } /* keyframes animation */ @keyframes homeBgText { 0%, 10%, 100% { background-position: -15rem 0; } 65%, 85% { background-position: 20rem 0; } } @keyframes aboutSpinner { 100% { transform: translate(-50%, -50%) rotate(360deg); } }

Дополнительно:

P.S. отрицательный -20rem в позиции 0 10 100 не работает

+ Заказать

Для решения данной проблемы вы можете воспользоваться услугами фрилансеров. Мы выполним необходимую работу быстро и качественно.

Есть ответ
08.04.2024

Ответить

Чтобы исправить направление анимации CSS, нужно использовать свойство transform: scaleX(-1);. Это позволит отразить элемент по горизонтали и сделать анимацию идущей в нужном направлении.

Пример кода на языке PHP:

.element {
  animation: slide 1s infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

.element {

animation: slide 1s infinite;

}

@keyframes slide {

0% {

transform: translateX(0);

}

100% {

transform: translateX(100%);

}

Чтобы изменить направление анимации на обратное, добавьте свойство transform: scaleX(-1); к элементу, который анимируете.

Пример исправленного кода:

.element {
  animation: slide 1s infinite;
  transform: scaleX(-1);
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

.element {

animation: slide 1s infinite;

transform: scaleX(-1);

}

@keyframes slide {

0% {

transform: translateX(0);

}

100% {

transform: translateX(100%);

}

Теперь анимация будет идти справа налево, как задумано. Не забывайте проверять совместимость свойств и поддержку браузерами перед использованием.

Почему анимация CSS идет в обратную сторону(справа налево) и как это исправить?

Дополнительно:

Оставить комментарий Отменить

Ответы

Ежедневно, круглосуточно

Почему анимация CSS идет в обратную сторону(справа налево) и как это исправить?

Дополнительно:

Оставить комментарий Отменить

Ответы

Метки

Ежедневно, круглосуточно