css 动画失效的问题

Question

界面中需要一个弹窗，想做一个弹出时的动画效果，代码如下

$(".modal_container").css({
    '-webkit-transform': 'scale(1.1)',
    '-ms-transform': 'scale(1.1)',
    'transform': 'scale(1.1)',
    '-webkit-transition-duration': '1.4s',
    'transition-duration': '1.4s',
    '-webkit-transition-timing-function': 'cubic-bezier(0.27, 1.12, 0.32, 1.5)',
    'transition-timing-function': 'cubic-bezier(0.27, 1.12, 0.32, 1.5)'
});

即做一下浮层弹窗的放大效果，有一个回弹的动画；在demo程序中同样的代码是可以的，但在我的程序中只有scale缩放效果，但动画的实现过程没有，直接就变成了缩放的比例了！百思不得其解，不知有没有人能提点建议？

Answer 1

你这个是transition过渡，不是动画animation,当然回不去阿

@keyframes change {
            0% {
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
            }
            70% {
                -webkit-transform: scale(1.1);
                -ms-transform: scale(1.1);
                transform: scale(1.1);
            }
            100% {
                -webkit-transform: scale(1);
                -ms-transform: scale(1);
                transform: scale(1);
            }
        }        

$(".modal_container").css({animation: "change 1.4s linear"})

Answer 2

缺少transition-property，动画不知道将要应用到哪个属性上。

加上transition-property:transform