CSS动画旋转和平移不能一起使用 [英] css animation rotate and translate doesn't work together

问题描述

我正在使用@keyframes尝试css动画，但是css的Transform旋转和平移属性无法同时使用。

I'm trying out the css animation using @keyframes, however the css Transform rotate and translate properties aren't working together.

请告诉我们这里出了什么问题。谢谢!!

Please advise on what has gone wrong here. Thanks!!

您可以在codepen上检查代码：
http://codepen.io/anon/pen/XdzwZB

You can check the code on codepen: http://codepen.io/anon/pen/XdzwZB

以下是我的@keyframes代码：

following is my @keyframes code:

@keyframes slideIn {
  0%, 100% {
    transform: translate(10px);
    transform: rotate(0deg);
    color: red;
  }
  25% {
    transform: translate(125px);
    transform: rotate(360deg);
    color: green;
  }
}

推荐答案

应用多个变换的正确方法是将它们全部放在一个 transform 属性中，每个变换之间用空格分隔：

The correct way to apply multiple transforms is to simply place them all in one transform property, with each transform separated by a space:

@keyframes slideIn {
  0%, 100% {
    transform: translate(10px) rotate(0deg);
    color: red;
  }
  25% {
    transform: translate(125px) rotate(360deg);
    color: green;
  }
}

更新后的密码笔

这篇关于CSS动画旋转和平移不能一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！