jquery - CSS动画规模

Question

我正在尝试为 0.5 - 1 的比例设置动画。首次添加 div 时，我添加 css 将其缩放到 .5，然后我在元素 css 上将其缩放回 1。

     $('.item').each(function(count){
        $(this).css({top: 0, left:20, transform : "scale(.5)"});
    }); 

CSS

.item {
  -webkit-transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;
     -moz-transition: top 0.5s ease-in-out 0s, left 0.5s ease-in-out 0s, right 0.5s ease-in-out 0s;
       -o-transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;
      -ms-transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;
          transition: top 0.4s ease-out 0s, left 0.4s ease-out 0s, right 0.4s ease-out 0s;

  transform: scale(1) ease-in-out 0s;   
  -moz-transform: scale(1) ease-in-out 0s;
}

为什么这行不通。它保持在 .5 并且不会动画到 1

此样式也没有动画。

-moz-transform: scale(.4) 2s ease-in-out 4s;

我用的是 firefox 应该不行。还是我写错了速记

Answer 1

首先，我认为通过 jquery css 函数设置转换不会应用特定于浏览器的样式(-webkit、-moz-、-o、-ms)，这意味着它们可能无法在今天大多数浏览器。

其次，通过元素上的 style 属性使用 JS 设置样式称为 inline style 并覆盖任何 css 类/选择器。我不认为这会导致问题。

您需要 2 个类。一个已经有 0.5 比例的，然后在加载时用 JS 应用第二个类。另一种方法是使用 CSS 关键帧。 http://www.w3schools.com/cssref/css3_pr_keyframes.asp