使用图形/代码笔的CSS后续转换

我尝试将两个图像设置为一个中心点，然后同时旋转它们。我不知道如何在动画开始之前变换SVG。请参见下面的模型

我需要在动画开始之前执行

变换：旋转（90度）

（在

上：悬停

）。我似乎无法使

变换在动画之前生效。请参阅以下代码笔：

查看我的代码笔：
而不是延迟动画

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

智能解决方案。谢谢你的帮助。