CSS 动画缩放

Question

我正在尝试从 .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;

我正在使用火狐不应该工作。 还是我写错了速记

Answer 1

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

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

你需要的是2节课。一个已经具有 .5 的小数位数，然后在加载时使用 JS 应用第二个类。另一种方法是使用 CSS 关键帧。http://www.w3schools.com/cssref/css3_pr_keyframes.asp