CSS анимация игнорирует вращение

Question

Я пытаюсь сделать анимацию, где несколько элементов выглядят больше, чем они есть, и возвращаются к норме.

Вот что у меня есть:

Один из элементов

#element {
  position: absolute;
  width: 38%;
  height: auto;
  animation: ani 250ms ease-in;
  -webkit-animation: ani 250ms ease-in;
  transform: rotate(82deg);
}

И ключевой кадр

@keyframes ani {
    0% {
        transform: scale(1.5);
        -webkit-transform: scale(1.5);
    }
    100% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }
}

< Сильный > HTML

<div id="wrapper">
  <img id="element" src="img.svg">
  <img id="element2" src="img2.svg">
</div>

Проблема в том, что всякий раз, когда анимация начинается, элементы появляются так, как они никогда не вращались, и вращаются только после окончания анимации. Как я мог заставить их вращаться перед анимацией?

css css-animations keyframe

1

JulioBordeaux 25 Апр 2017 в 06:53

Answer 1

Вы должны также объединить код поворота с преобразованием в анимации. в основном rotate и scale оба являются значениями свойства transform, поэтому, если вы используете только масштаб в анимации, он переопределит значение rotate и покажет только {{ Х4 } } .

#element {
  position: absolute;
  width: 38%;
  height: auto;
  animation: ani 250ms ease-in;
  -webkit-animation: ani 250ms ease-in;
  transform: rotate(82deg);
}

@keyframes ani {
    0% {
        transform: scale(1.5) rotate(82deg);
        -webkit-transform: scale(1.5) rotate(82deg);
    }
    100% {
        transform: scale(1.0) rotate(82deg);
        -webkit-transform: scale(1.0) rotate(82deg);
    }
}

<div id="wrapper">
  <img id="element" src="https://pbs.twimg.com/profile_images/604644048/sign051.gif">
  <img id="element2" src="http://smallbusinessbc.ca/wp-content/themes/sbbcmain/images/circle-icons/icon-education.svg">
</div>

3

Lucian 25 Апр 2017 в 04:09

Answer 2

Вам нужно переместить вращение в ключевые кадры:

#element {
  position: absolute;
  width: 38%;
  height: auto;
  animation: ani 250ms ease-in;
  -webkit-animation: ani 250ms ease-in;
}

@keyframes ani {
    0% {
        transform: scale(1.5) rotate(0deg);
        -webkit-transform: scale(1.5) rotate(0deg);
    }
    100% {
        transform: scale(1.0) rotate(82deg);
        -webkit-transform: scale(1.0) rotate(82deg);
    }
}

0

asarna 25 Апр 2017 в 04:05

CSS анимация игнорирует вращение

2 ответа

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

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

css