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

一切都有效，除了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 ;
}

使用上面的动画。

Answer 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);

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

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

注意：我已经使用了转换，因为我想显示只在关键帧的前缀版本中使用前缀

css动画比例无法正常工作

2 个答案: