将多个CSS动画组合成一个整体动画
将多个CSS动画组合成一个整体动画
提问于 2013-03-29 17:53:55
我有一套动画，我排队一个接一个，以创造一个更大的整体动画。为了简单起见，我创建了一个简单的小提琴来演示我的意思，但它是我试图实现的(底部的代码)的一个简化版本。
http://jsfiddle.net/UnsungHero97/qgvrs/5/
我想要做的是把所有这些组合成一个动画，而不是几个动画。目前，我添加了一个类来触发动画的不同阶段，但是我想要做的是只添加一个类一次来启动动画，然后它就会结束了。
我不知道如何将动画组合成一个，因为它们在不同的元素上工作。我对CSS3动画还是很陌生的，所以有可能做到这一点吗？
有什么想法吗？
“守则”
HTML
<div class="outside">
<div class="inside"></div>
</div>CSS
.outside {
border: 1px solid magenta;
height: 100px;
width: 100px;
position: relative;
}
.inside {
border: 1px solid skyblue;
height: 60px;
width: 60px;
margin-top: -31px;
margin-left: -31px;
position: absolute;
top: 50%;
left: 50%;
}
@-webkit-keyframes scale-in {
0% {
-webkit-transform: scale(0);
}
100% {
-webkit-transform: scale(1);
}
}
@-webkit-keyframes bounce {
0% {
-webkit-transform: scale(1);
}
25% {
-webkit-transform: scale(.8);
}
50% {
-webkit-transform: scale(1);
}
75% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
.bounce {
-webkit-animation-duration: 500ms;
-webkit-animation-name: bounce;
}
.animate {
-webkit-animation-delay: 0s;
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease;
-webkit-transform: translateZ(0);
}
.click {
border: 1px solid skyblue;
-webkit-animation-duration: 1000ms;
-webkit-animation-name: rotate;
}
.click .inside {
border: 1px solid magenta;
-webkit-animation-duration: 1000ms;
-webkit-animation-name: rotate;
}
.clicked {
border: 1px solid magenta;
}
.clicked .inside {
border: 1px solid skyblue;
-webkit-animation-duration: 750ms;
-webkit-animation-name: scale-in;
}JS
$(document).ready(function() {
$(document).click(function() {
var jqElement = $('.outside');
jqElement
.off()
.addClass('animate')
.addClass('bounce');
jqElement.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
event.stopPropagation();
jqElement
.removeClass('bounce')
.removeClass('animate')
.off()
.addClass('animate')
.addClass('click');
jqElement.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
event.stopPropagation();
jqElement
.removeClass('click')
.removeClass('animate')
.off()
.addClass('clicked');
setTimeout(function() {
jqElement.removeClass('clicked');
}, 500);
});
});
});
});回答 2
Stack Overflow用户
回答已采纳
发布于 2013-03-29 18:09:30
一个动画--一个元素是如何工作的，因为动画改变了单个元素的样式。但是，您可以将延迟应用于动画，以实现您想要的结果，允许您将几乎所有的东西都移出JS。
本例将您的.outside合并为.inside动画，基本上是在规则中添加逗号，您现在只需添加类似于-webkit-animation-name: button-bounce, rotate, skyblue;的类。
jsFiddle
CSS
.outside.animate {
-webkit-animation-delay: 0s, .5s, .5s;
-webkit-animation-duration: 500ms, 1000ms, 1000ms;
-webkit-animation-name: button-bounce, rotate, skyblue;
}
.animate {
-webkit-animation-fill-mode: forwards;
-webkit-animation-timing-function: ease;
-webkit-transform: translateZ(0);
}
.outside.animate .inside {
-webkit-animation-delay: .5s, .5s, 1.5s;
-webkit-animation-duration: 1000ms, 1000ms, 750ms;
-webkit-animation-name: rotate, magenta, scale-in;
}新动画
@-webkit-keyframes magenta {
0% { border: 1px solid magenta; }
99.99% { border: 1px solid magenta; }
100% { border: 1px solid skyblue; }
}
@-webkit-keyframes skyblue {
0% { border: 1px solid skyblue; }
99.99% { border: 1px solid skyblue; }
100% { border: 1px solid magenta; }
}JavaScript
$(document).ready(function() {
$(document).click(function() {
var count = 0;
var jqElement = $('.outside');
if (!jqElement.hasClass('animate')) {
jqElement.addClass('animate');
jqElement.on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(event) {
count++;
if (count >= 6) {
jqElement.off('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd');
jqElement.removeClass('animate');
}
});
}
});
});Stack Overflow用户
发布于 2015-07-22 12:42:19
您可以在速记属性中使用由逗号分隔的多个动画：
.selector
{
animation: animation-name 2s infinite,
other-animation-name 1s;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15708695
复制相关文章
相似问题
腾讯云开发者
