CSS动画忽略旋转答案

【问题标题】：css animation ignores rotationCSS动画忽略旋转
【发布时间】：2023-03-18 22:29:01
【问题描述】：

我正在尝试制作动画，其中很少有元素会显得比实际更大并缩小到正常状态。

这是我得到的：

元素之一

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

问题在于，每当动画开始时，元素就会出现，因为它们从未被旋转过，并且只有在动画结束后才会旋转。我怎么能强制他们在动画之前旋转？

【问题讨论】：

你有html吗？所以我们可以测试

标签： css css-animations keyframe

【解决方案1】：

您也应该将旋转代码与动画中的变换结合起来。基本上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>

【讨论】：

这是唯一的方法吗？例如。如果我有 10 个具有不同旋转角度的元素，我应该为每个元素描述一个关键帧吗？

【解决方案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);
    }
}

【讨论】：