html transform scale 怎么做到先放大到1.3倍再缩小到1 ？

Question

html transform scale 怎么做到先放大到1.3倍再缩小到1 ？

$("#v-done-img").css({'transform':'scale(1.3)','transition': 'all 1.2s'});

上面代码仅仅可以放大，但是我想让他紧接着缩回去，该怎么写？

Answer 1

@keyframes myanimate{
from {

transform: scale(1.3);

}
to {

transform: scale(1);

}
}

Answer 2

1.第一种方式是重新用keyframe写个动画，这个动画里先放大后缩写，然后在你代码这里给这个元素加上这个动画
2.第二种方式是用setTimeout 1.2s之后用css设置scale

Answer 3

楼上说的对，keyframes你值得拥有

Answer 4

$("#v-done-img").css({'transform':'scale(1.3)','transition': 'all 1.2s'});
setTimeout(function(){

$("#v-done-img").css({'transform':'scale(1)','transition': 'all 1.2s'});

},1200)

Answer 5

$("#v-done-img")
.css({'transform':'scale(1.3)','transition': 'all 1.2s'})
.delay( 1200 )
.promise()
.done(function () {
  $(this).css({'transform':'scale(1)','transition': 'all 1.2s'})
})