css - 如何让 div 悬停在 css3 动画上

Question

如何在悬停时保持 div 的扩展（而不是一旦悬停它执行一次并再次变小）在我的情况下，悬停使框变大并保持不变，mouseout 然后将其变小..

这是我的代码：

.box{width:30px; height:30px; border-radius:100%; margin:200px auto; background:lightblue;}

.box:hover{-webkit-animation:boxes 2s;}

@-webkit-keyframes boxes{
from{width:30px;heigh:30px;}
to{width:200px;height:200px;}
}

http://jsfiddle.net/4S98w/

Answer 1

用于-webkit-animation-fill-mode: forwards;让最终动画状态持续存在：

.box:hover {
    -webkit-animation:boxes 2s;
    -webkit-animation-fill-mode: forwards;
}

http://jsfiddle.net/teddyrised/4S98w/1/

但是，如果您希望动画双向播放（即悬停时动画放大，悬停时动画缩小），我可以建议使用 CSS 过渡吗？

.box {
    width:30px;
    height:30px;
    border-radius:100%;
    margin:200px auto;
    background:lightblue;
    transition: all 2s ease-in-out;
    /* or you can use "transition: all 2s linear:" */
}
.box:hover {
    width: 200px;
    height: 200px;
}

http://jsfiddle.net/teddyrised/4S98w/2/

Answer 2

js小提琴：http: //jsfiddle.net/4S98w/3/

使用 css 过渡：

.box{width:30px; height:30px; border-radius:100%; margin:200px auto;background:lightblue;
    transition : width 2s, height 2s;
    -webkit-transition : width 2s, height 2s;
}

.box:hover{    width:200px;height:200px;
    transition : width 2s, height 2s;
    -webkit-transition : width 2s, height 2s;
}