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>

问题是，每当动画开始时，元素看起来从未旋转过，只有在动画结束后才会旋转。我怎样才能强制他们在动画之前旋转？

Answer 1

您需要将旋转移动到关键帧中：

#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);
    }
}

Answer 2

你也应该将旋转代码与动画中的变换结合起来。基本上 rotate 和 scale 都是 transform 属性的值，所以如果你只在动画中使用比例，它会覆盖 rotate 值并且只会显示 scale.

#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>

css 动画忽略旋转

css animation ignores rotation

css

keyframe

css-animations