CSS 后续转换 graphic/codepen

Question

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

我需要在动画开始前做一个 transform: rotate(90deg)（在 :hover）。我似乎无法让 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

CSS 后续转换 graphic/codepen

CSS subsequent transitions with graphic/codepen

css

css-animations