平稳停止CSS关键帧动画
我有以下代码：
function stopGlobe() {
$('.mapfront').removeClass('mapfront-anim');
$('.mapback').removeClass('mapback-anim');
}
function startGlobe() {
$('.mapfront').addClass('mapfront-anim');
$('.mapback').addClass('mapback-anim');
}
@keyframes mapfront_spin {
0% {
background-position: 1400px 0%;
}
100% {
background-position: 0 0%;
}
}
@keyframes mapback_spin {
0% {
background-position: 0 0%;
}
100% {
background-position: 1400px 0%;
}
}
@-webkit-keyframes mapfront_spin {
0% {
background-position: 1400px 0%;
}
100% {
background-position: 0 0%;
}
}
@-webkit-keyframes mapback_spin {
0% {
background-position: 0 0%;
}
100% {
background-position: 1400px 0%;
}
}
body {
margin: 50px;
background: #000;
}
.globe {
width: 400px;
height: 400px;
position: relative;
}
.front {
width: 400px;
height: 400px;
background: url(http://dl.dropboxusercontent.com/u/17180596/SphereForeground.png);
z-index: 5;
position: absolute;
top: 0;
left: 0;
}
.back {
width: 400px;
height: 400px;
background: url(http://dl.dropboxusercontent.com/u/17180596/SphereBackground.png);
z-index: 2;
position: absolute;
top: 0;
left: 0;
}
.mapfront, .mapback {
border-radius: 300px;
width: 340px;
height: 340px;
position: absolute;
top: 30px;
left: 30px;
z-index: 4;
}
.mapfront {
background: url(http://dl.dropboxusercontent.com/u/17180596/CartoForeground.png) repeat-x;
}
.mapfront-anim {
-webkit-animation: mapfront_spin 15s linear infinite;
animation: mapfront_spin 15s linear infinite;
}
.mapback {
background: url(http://dl.dropboxusercontent.com/u/17180596/CartoBackground.png) repeat-x;
position: absolute;
}
.mapback-anim {
-webkit-animation: mapback_spin 15s linear infinite;
animation: mapback_spin 15s linear infinite;
}
<div class="globe">
<div class="front"></div>
<div class="mapfront mapfront-anim"></div>
<div class="mapback mapback-anim"></div>
<div class="back"></div>
</div>
执行javascript函数后，stopGlobe()动画会停止，但会突然停止。
我可以平稳地停止动画，以避免突然跳入，然后从停止的位置再次继续动画吗？
问题答案：
您不会喜欢这个答案，但现实是CSS3动画对于实现此目的并不是真正有用。为了完成这项工作，您需要在Javascript中复制很多CSS，这会破坏点（例如，在此密切相关的答案中，例如，[更改动画CSS3的速度？）。要真正使它平稳停止，最好的选择是在Greensock动画库之类的平台上编写动画，该平台提供了使它实际上平稳停止而不是突然停止所需的所有工具。
-
我做了一个动画为一些元素（图像和按钮）淡入淡出使用不透明度。除了Safari之外，它在所有浏览器上都能完美地工作。当我尝试在Safari中运行它时，我的所有元素都有100%的不透明度，没有任何动画可以看到… 来自button元素的示例： 以下是我的HTML： 和我的CSS：
-
本文向大家介绍什么是关键帧动画？相关面试题，主要包含被问及什么是关键帧动画？时的应答技巧和注意事项，需要的朋友参考一下 表示关键状态的帧动画叫做关键帧动画。 所谓关键帧动画，就是给需要动画效果的属性，准备一组与时间相关的值，这些值都是在动画序列中比较关键的帧中提取出来的，而其他时间帧中的值，可以用这些关键值，采用特定的插值方法计算得到，从而达到比较流畅的动画效果。
-
问题内容： 我有一段非常基本的HTML，其目的是使动画从变为不透明，从0变为1。 我使用的是Chrome浏览器，该浏览器使用前缀作为首选项，并进行了过渡设置以使动画成为可能。但是，它不起作用，只是在不褪色的情况下进行了更改。 我有一个JSFiddle 。 问题答案： 如果您正在使用，则应使用而不是。 请参见下面的代码段： 2016年更新的答案 为了反映当今的最佳做法，我将使用过渡而不是动画。这是更
-
我们有一个键控流程函数，它使用状态和在此之前立即执行的“key by”。“key by”属性涉及事务值，因此我们希望创建许多键。但这些都是短期的，我们预计不会持续超过一天。是否有任何方法可以从键控流程功能中手动删除与键关联的所有状态和键本身？ 只需将关联状态变量的值设置为null，Flink就能清除它吗？ 我们担心，即使是为每个关键值保留的非常少量的剩余数据，也会累积并导致巨大的状态大小。
-
动画关键帧 动画关键帧是使用keyframes属性中的数组定义的。 如果关键帧内没有指定duration（持续时间），则每个关键帧的持续时间将等于动画总持续时间除以关键帧数。 Type Example Array [ {value: 100, easing: 'easeOutExpo'}, {value: 200, delay: 500}, {value: 300, duration: 1000}
-
在CSS3中，通过 animation 属性来定义动画。虽然 transition 也可以实现从一种状态到另一种状态的动画效果，但它只能控制开始和结束的两个点，功能非常有限。而 animation 除了能控制开始和结束的两个点外，还能通过关键帧来控制动画的每一步，可以实现更为复杂的动画效果。 CSS3中，animation 实现的动画由两个部分组成：首先，使用关键帧 @keyframes 来声明一