CSS3平滑地停止动画

我有一个用于将球向上和向下移动的css类。CSS3平滑地停止动画

.active_animation { 
 
    animation-duration: 5s; 
 
    animation-iteration-count: infinite; 
 
    animation-direction: alternate; 
 
    animation-fill-mode: forwards; 
 
    -webkit-animation-fill-mode: forwards; 
 
    cursor: pointer; 
 
} 
 

 
.paused_animation { 
 
    -ms-animation-play-state: paused; 
 
    -o-animation-play-state: paused; 
 
    -moz-animation-play-state: paused; 
 
    -webkit-animation-play-state: paused; 
 
    animation-play-state: paused; 
 
}

<div class="active_animation">Ball</div>

动画工作正常，但是当我尝试使用jQuery的暂停（通过增加pause_animation到球）这个动画我不能将它移动到另一个位置。

如果我尝试删除.active_animation类，它不会平稳停止。

我的问题是我该如何暂停动画并有能力移动那个球？

请帮忙!!!

来源

2017-08-31 Chhorn Soro

对于高级动画，最好使用一些动画里brary。就像https://greensock.com/tweenmax – Volvox

看看这篇文章[停止CSS动画]（https://stackoverflow.com/questions/13061209/stopping-a-css-animation-but-letting-its-当前迭代精加工） –

也许最简单的解决方案是让你的动画取决于另一个变量，有应用在这一个过渡，然后再更改第二个变量

例如价值，你可以做一个变换：平移Y依赖在元素的高度（以百分比设置它），然后设置高度为0：

function stop() { 
 
    var ele = document.getElementById('adapter'); 
 
    if (ele.style.height == '0%') { 
 
     ele.style.height = '100%'; 
 
    } else { 
 
     ele.style.height = '0%'; 
 
    } 
 
}

.container { 
 
\t border: solid 1px green; 
 
\t height: 400px; 
 
\t width: 400px; 
 
} 
 

 
#adapter { 
 
\t height: 100%; 
 
\t transition: height 2s; 
 
\t animation: bounce 4s infinite alternate linear; 
 
} 
 

 
#div1 { 
 
\t height: 20px; 
 
\t width: 20px; 
 
\t background-color: bisque; 
 
\t border-radius: 50%; 
 
} 
 

 
@keyframes bounce { 
 
\t from {transform: translateY(0%);} 
 
\t to {transform: translateY(100%);} 
 
} 
 

 
button { 
 
\t position: absolute; 
 
    left: 450px; 
 
    top: 10px; 
 
}

<div class="container"> 
 
    <div id="adapter"> 
 
     <div id="div1"></div> 
 
    </div> 
 
</div> 
 
<button onclick="stop();">Stop</button>

来源

2017-08-31 10:53:29 vals

CSS3平滑地停止动画

回答

相关问题