返回CSS动画的起始位置
返回CSS动画的起始位置
提问于 2014-11-14 14:45:30
我想完成动画，并顺利返回到它原来的状态，但有一个跳跃。
所需条件，动画的持续时间可以是任意的。
我尝试使用CSS特性来完成这个任务。
setTimeout(function() {
$('div').addClass('stop');
}, 2500);div {
width: 50px;
height: 300px;
margin: 50px 150px;
background-color: green;
-webkit-animation: wiggle 2s linear infinite;
animation: wiggle 2s linear infinite;
}
.stop {
-webkit-animation: none;
animation: none;
}
@-webkit-keyframes wiggle {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes wiggle {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2014-11-14 15:11:31
我已经创建了一个停止和启动动画，旋转回到开始。它从按钮开始和停止，并且可以很容易地在加载时启动。这个答案的底部有一个完整的演示:)
div看起来如下：
<div class="rotate"></div>无限动画
.play {
-webkit-animation: wiggle 2s linear infinite;
animation: wiggle 2s linear infinite;
}The jQuery
- 启动动画： $(“.start”).on(“单击”，函数(){//添加无限旋转动画类$('div').addClass('play旋转‘)；}；
- 停止动画： 获取元素的当前旋转。改编自this answer here，由@twist改编 函数getRotationDegrees(obj) { var矩阵= obj.css("-webkit-transform") \x\x- obj.css("-moz-transform")欧元- obj.css("-ms-transform") \x- obj.css("-o-transform") (“transform”)(“transform”)；if (矩阵!== 'none') { var值=matrix.split(‘(’‘)1.split(’)‘).split(’，‘，’')；var a=值；var b= values1；变量角= Math.round(Math.atan2(b，a) * (180 / Math.PI))；}{ var角= 0；}返回(角< 0)？角+= 360 :角；} 获取当前角度，然后通过移除以下类来停止当前动画： $(“.stop”).on(“单击”，函数(){//获取当前旋转值angle1 = getRotationDegrees($('.rotate'))；//停止当前动画$(‘div’).removeClass(‘播放旋转’)；
- 创建新的停止动画:它看起来有点混乱。基本上，它正在创建一个以当前旋转为起点的新动画。然后动画把它带回到
0deg。 //创建停止动画，并应用于新的类“旋转”var动画= '.rotated {-webkit-动画:停止2s前进；动画:停止2s前进；}@-webkit-关键帧停止{ 0% { transform:旋转(‘+ angle1 + 'deg);} 100% {transform(’+ angle1 + 'deg);} @keyframes停止{ 0% { transform:旋转(‘+angle1+’deg)；} 100% { transform:旋转(-0deg)；}；//在标题$(‘head’).append(动画)中添加新样式； - 重新启动动画： $(“.start”).on(“单击”，函数(){//移除停止动画类$(‘div’).removeClass(‘旋转式’)；//添加无限旋转动画类$(‘div’).addClass(‘播放旋转’)；}；
添加的<style>标记在动画完成后被移除：
//Garbage man - Remove the style tags after the animation is done
// Important - The timeout should match the duration of the stop animation.
setTimeout(
function()
{
$('style[title="stopAnimation"]').remove();
}, 2000);全例
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if (matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180 / Math.PI));
} else {
var angle = 0;
}
return (angle < 0) ? angle += 360 : angle;
}
$(".stop").on("click", function() {
//Get the current rotation value
angle1 = getRotationDegrees($('.rotate'));
//Stop current animation
$('div').removeClass('play rotate');
//Add class "rotated" for new animation
$('div').addClass('rotated');
//Create stop animation and apply to new class "rotated"
var animation = '<style type="text/css" title="stopAnimation">.rotated { -webkit-animation: stop 2s linear forwards; animation: stop 2s linear forwards; } @-webkit-keyframes stop { 0% { transform: rotate(' + angle1 + 'deg);} 100% { transform: rotate(-0deg); } } @keyframes stop { 0% { transform: rotate(' + angle1 + 'deg);} 100% { transform: rotate(-0deg); } }</style>';
//Append new styles to the header
$('head').append(animation);
//Garbage man - Remove the style tags after the animation is done
// Important - The timeout should match the duration of the stop animation.
setTimeout(
function()
{
$('style[title="stopAnimation"]').remove();
}, 2000);
});
$(".start").on("click", function() {
//Remove stopping animation class
$('div').removeClass('rotated');
//Add infinite rotation animation classes
$('div').addClass('play rotate');
});div {
width: 50px;
height: 300px;
margin: 50px 150px;
background-color: green;
}
.play {
-webkit-animation: wiggle 2s linear infinite;
animation: wiggle 2s linear infinite;
}
@-webkit-keyframes wiggle {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes wiggle {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="stop">Stop!</button>
<button class="start">Start!</button>
<div class="rotate"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26932536
复制相关文章
相似问题
腾讯云开发者
