<style>
.flex{height:100%;display:flex;justify-content:center;align-items:center}
img{height:250;width:250;}
@keyframes mymove
{
from {height:250;width:250;}
to {height:400;width:400;}
}
@keyframes back
{
from {height:400;width:400;}
to {height:250;width:250;}
}
</style>
<div class=flex>
<img src=sj.jpg>
</div>
<script src=jq.js></script>
<script>
$("img").hover(function(){
$(this).css({'animation':'mymove 0.5s','animation-fill-mode': 'forwards',
'animation-timing-function':'ease'});
})
$("img").mouseout(function(){
$(this).css({'animation':'back 0.5s','animation-fill-mode': 'forwards',
'animation-timing-function':'ease'});
})
</script>
<style>
.flex{height:100%;display:flex;justify-content:center;align-items:center}
img{transition: all 0.8s;height:250;width:250;}
img:hover{transform:scale(1.4);}
</style>
<div class=flex>
<img src=sj.jpg>
</div>
可以看到,第二种方法比第一种简洁很多。