Page 251 - css揭秘

图 8-31
鼠标悬停时动画是十分平滑的，但
当鼠标移出时，动画就直接跳回初
始状态了，整个效果功亏一篑

为了修复这个问题，我们需要换个角度来思考：我们在这里到底想要实
现什么样的结果。我们需要的并不是在 :hover 时应用一个动画，因为这意
味着动画被中断时的状态是无处保存的。我们需要的是当失去 :hover 状态
时暂停动画。幸运的是，有一个属性正好是为暂停动画的需求专门设计的：
animation-play-state ！
图 8-32
现在鼠标移出后只会将动画暂停，
再也不会生硬地跳回初始状态了

因此，我们需要把动画加在 .panoramic 这条样式中，但是让它一开始
就处于暂停状态，直到 :hover 时再启动动画。这再也不是添加和取消动画
的问题了，而只是暂停和继续一个一直存在的动画，因此再也不会有生硬的
跳回现象了。最终代码如下所示，你可以在图 8-32 中看到实际效果：

@keyframes panoramic {
to { background-position: 100% 0; }
}

.panoramic {
width: 150px; height: 150px;
background: url("img/naxos-greece.jpg");
background-size: auto 100%;
animation: panoramic 10s linear infinite alternate;
animation-play-state: paused;
}

.panoramic:hover, .panoramic:focus {
animation-play-state: running;
}

试一试 play.csssecrets.io/state-animations

„ CSS 动画
http://w3.org/TR/css-animations 相关规范

220 第 8 章 过渡与动画

඀ࠡ JOEC