带有图形/codepen 的 CSS 后续转换

Question

我正在尝试将两个图像动画化到一个中心点，然后同时旋转它们。我不确定如何在动画开始之前转换 svgs。请参见以下模型。

我需要在动画开始之前(在 :hover 上)执行一个 transform: rotate(90deg)。我似乎无法让 transform 在动画之前生效。请参阅以下代码笔:

查看我的代码笔:http://codepen.io/himmel/pen/dPzVmg

Answer 1

而不是延迟动画

.svg-container-burger {
  -webkit-animation: rotateClockwise 1s linear;
  -webkit-animation-delay: 1s;
}

并尝试在动画之前旋转对象，只需将动画扩展到它之前的暂停，并在其中设置旋转

.svg-container-mouth {
    -webkit-animation: rotateClockwise 2s linear;
}
@-webkit-keyframes rotateClockwise {
  0% {
    -webkit-transform: rotate(-90deg);
  }
  50% {
    -webkit-transform: rotate(-90deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}

codepen