CSS动画比例不起作用答案

【问题标题】：css animation scale not workingCSS动画比例不起作用
【发布时间】：2014-10-31 19:44:11
【问题描述】：

我正在使用 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;
}
}

除了 Scale 属性之外，一切都有效，它一次性缩放而不是动画。我使用 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 ;
}

使用上述动画。

【问题讨论】：

你能把这个放在一个 jsfiddle 里让我帮你吗？

标签： css animation scale

【解决方案1】：

这是因为您实际上是在覆盖您的 scale 转换.. 看看下面的 css：

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

这与设置如下内容相同：

    color: red;
    color: blue;

在这种情况下，您会希望元素的 color 属性为 blue，因为该样式规则排在第二位，并会覆盖 red 的样式规则。

transform 也是如此，即使您使用不同类型的转换，它们仍然共享相同的transform 属性。

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

你可以通过像这样声明你的样式来解决这个问题，而不是：

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

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

【讨论】：

【解决方案2】：

使用

@-webkit-keyframes

Webkit 也为关键帧使用前缀。完整示例：

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

注意：我使用了转换，因为我想表明前缀仅用于关键帧的前缀版本

【讨论】：