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;

我正在使用firefox应该不行。或者我写的不正确是简写

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

CSS动画比例

1 个答案: