CSS3 动画：找不到错误（圆圈路径）答案

【问题标题】：CSS3 Animation: can't find the mistake (circle path)CSS3 动画：找不到错误（圆圈路径）
【发布时间】：2014-06-01 04:29:35
【问题描述】：

我似乎找不到错误。字母不会在圆形路径中移动。在 Dabblet 中它可以正常工作，但是当我在本地运行它时它就不起作用了。

CSS：

         @charset "UTF-8";
@keyframes rot {
    from {
        transform: rotate(0deg)
                   translate(-150px)
                   rotate(0deg);
    }
    to {
        transform: rotate(360deg)
                   translate(-150px) 
                   rotate(-360deg);
    }
}

@-webkit-keyframes rot {
    from {
        transform: rotate(0deg)
                   translate(-150px)
                   rotate(0deg);
    }
    to {
        transform: rotate(360deg)
                   translate(-150px) 
                   rotate(-360deg);
    }
}
@-moz-keyframes rot {
    from {
        transform: rotate(0deg)
                   translate(-150px)
                   rotate(0deg);
    }
    to {
        transform: rotate(360deg)
                   translate(-150px) 
                   rotate(-360deg);
    }
}


.smile {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 200px;
    left: 50%;
    margin: -20px;
    font-size: 100px;
    animation: rot 3s infinite linear;
    -webkit-animation: rot 3s infinite linear;
    -moz-animation: rot 3s infinite linear;

}
.cry {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 200px;
    left: 50%;
    margin: -20px;
    font-size: 20px;
    animation: rot 3s infinite linear;
    -webkit-animation: rot 3s infinite linear;
    -moz-animation: rot 3s infinite linear;
}

HTML

<!DOCTYPE HTML>
<html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div class="smile">S</div>
        <div class="cry">C</div>
    </body>
</html>

【问题讨论】：

您还需要为转换添加 webkit 前缀。（因为您是在 chrome 中查看它，所以它可以在 firefox 中使用）jsfiddle.net/M9Lx8/1

标签： html css animation

【解决方案1】：

它在 dabblet 中有效，因为该站点使用前缀 FREE，但在 jsfiddle 中，您不使用前缀 FREE，因此您必须为 transform 适当添加前缀：

@-webkit-keyframes rot {
  from {
    -webkit-transform: rotate(0deg)
               translate(-150px)
               rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg)
               translate(-150px) 
               rotate(-360deg);
  }
}

Demo.

有关transform 的可支持性信息，请查看此CSS transform support。如您所见，貌似只有 IE10+ 和 FireFox 16+ 支持 transform 不带前缀，其他应该添加前缀。

【讨论】：