CSS动画缩放不起作用

Question

我正在使用CSS关键帧创建一段动画。

这是我的代码:

@keyframes experience {
0% {
-webkit-transform: scale(0,0); 
        transform: scale(0,0);
-webkit-transform: translateY(40px);
        transform: translateY(40px);
opacity: 1;
}
60% {
-webkit-transform: scale(1,1); 
        transform: scale(1,1);
-webkit-transform: translateY(40px);
        transform: translateY(40px);
opacity: 1;
}
100% {
-webkit-transform: translateY(0px);
        transform: translateY(0px);
opacity: 1;
}
}

除了缩放属性以外，一切都正常。它会一次性缩放而不是动画效果。我正在使用Jquery waypoints插件，并且该div具有类。

.workitem {
    position: relative;
    width: 1000px;
    height: 200px;
    background-color: #333;
    margin: 0 auto; 
    opacity: 0;
    -webkit-transform: scale(0);
        transform: scale(0);
}

当航点到达时，我添加类名。

.experience {
     -webkit-transform: scale(0);
             transform: scale(0);
     -webkit-animation: experience 2s ease-in forwards ;
             animation: experience 2s ease-in forwards ;
}

使用上述动画效果的技术。

- andre de waard

---

你能把这个放到 jsfiddle 上让我帮你吗？ - chdltest

Answer 1

这是因为您实际上正在覆盖您的scale变换..请查看以下CSS：

    transform: scale(0,0);
    transform: translateY(40px);

这与设置以下内容相同：

    color: red;
    color: blue;

在此情况下，你会期望你的元素的 color 属性为 blue，因为这个样式规则位于第二个并覆盖了 red 的样式规则。

即使你使用不同类型的变换，transform 也是相同的道理。

你看到突然的跳动，因为你一开始将其设置为 scale(0,0)，但是一旦动画开始，你只是在平移元素，而不是缩放，所以它立即恢复正常。

你可以通过这样声明你的样式来避免这种情况：

    transform: scale(0,0) translateY(40px);

显然，从那里开始添加所有适当的供应商前缀！

- Blake Mann

Answer 2

使用

@-webkit-keyframes

WebKit也对关键帧使用前缀。完整示例：

@keyframes anim{
  to{transform:rotate(30deg);}
}
@-webkit-keyframes anim{
  to{-webkit-transform:rotate(30deg);}
}
#element{
  animation:anim;
  -webkit-animation:anim;
}

注意：我使用了 transform，因为我想展示前缀仅在带前缀的 keyframes 版本中使用。

- DividedByZero