Перевод и поворот текста ключевого кадра не работают

Question 1

Мне нравится переводить Y и поворачивать элемент h1 на свое место. но перевод не работает и при вращении текст уходит со своего места и возвращается обратно, а я хочу чтобы он все время был на своем месте.

Код:

.article1 h1{
    font-size: 50px;
    font-weight: 600;
    margin-top: 130px;
    margin-bottom: 12px; 
    animation: tilt 2s ease 3;
} 
@keyframes tilt{
  0% {
    transform: translateY(200px);
    transform: rotateY(0deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(0px);
    transform: rotateY(360deg);
    opacity: 1;
  }
}

Мне нужно, чтобы h1 пришел на свое место с высоты 200 пикселей и сделал вращение на 360 градусов по оси Y при опускании, возможно ли это?

css css-animations css-transitions

0

athithyan 8 Апр 2020 в 05:37

Вы можете поделиться своим html-кодом?

–

Manjuboyz

8 Апр 2020 в 05:39

<article class="article1">         <h1>What we do.</h1>         <h3>We provide Top-Quality Plants you choose right to your doorstep</h3>         <button class="button">Explore</button>     </article>

–

athithyan

8 Апр 2020 в 05:45

Вы можете сделать вложенные div и поместить анимацию на каждый.

–

Michael Nelles

8 Апр 2020 в 06:04

Answer

Ваше преобразование rotateY перезаписывает ваше преобразование translateY, вам нужно включить как rotateY, так и translateY в одну строку преобразования

Попробуй это:

@keyframes tilt{
  0% {
    transform: translateY(200px) rotateY(0deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(0px) rotateY(360deg);
    opacity: 1;
  }
}

0

Joundill 8 Апр 2020 в 05:43

Спасибо, теперь оба они работают, но все же, когда элементы вращаются, они перемещаются вправо и возвращаются влево, есть ли способ заставить их вращаться в одном месте?

–

athithyan

8 Апр 2020 в 05:48

Я не уверен, понимаю ли я, о чем вы спрашиваете. Ваш CSS говорит, что анимация происходит 3 раза, возможно, animation: tilt 2s ease 1; это исправит?

–

Joundill

8 Апр 2020 в 06:15

Question 2

Ваше преобразование rotateY перезаписывает ваше преобразование translateY, вам нужно включить как rotateY, так и translateY в одну строку преобразования

Попробуй это:

@keyframes tilt{
  0% {
    transform: translateY(200px) rotateY(0deg);
    opacity: 0.2;
  }
  100% {
    transform: translateY(0px) rotateY(360deg);
    opacity: 1;
  }
}

0

Joundill 8 Апр 2020 в 05:43

Спасибо, теперь оба они работают, но все же, когда элементы вращаются, они перемещаются вправо и возвращаются влево, есть ли способ заставить их вращаться в одном месте?

–

athithyan

8 Апр 2020 в 05:48

Я не уверен, понимаю ли я, о чем вы спрашиваете. Ваш CSS говорит, что анимация происходит 3 раза, возможно, animation: tilt 2s ease 1; это исправит?

–

Joundill

8 Апр 2020 в 06:15

Перевод и поворот текста ключевого кадра не работают

1 ответ

Похожие вопросы

Связанные вопросы

Новые вопросы

css