将多个CSS动画组合成一个整体动画 [英] combining multiple css animations into one overall animation
问题描述
我有一组动画,我排队一个接一个创建一个更大的整体动画。为了简单起见,我创建了一个简单的小提琴来演示我的意思,但它是我想要实现的一个简化版本(底部代码)...
I have a set of animations that I queue up one after the other to create a bigger overall animation. For the sake of simplicity, I've created a simple fiddle to demo what I mean, but it's a simplified version of what I'm trying to achieve (code on bottom)...
http://jsfiddle.net/UnsungHero97/qgvrs/5/
我想做的是将所有这些组合成一个动画而不是几个。目前,我添加了一个类来触发动画的不同阶段,但我想要做的是添加一个类只有一次来启动动画,然后就可以了。
What I want to do is combine all of these into one animation instead of several. Currently, I add a class to trigger the different stages of the animation, but what I would like to do is add a class only once to start the animation, and then it'll just go.
我不知道如何将动画组合成一个,因为他们工作在不同的元素。
I don't see how to combine the animations into one since they work on different elements. I'm still fairly new to CSS3 animations, so is it possible to do this?
任何想法?
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);
});
});
});
});
推荐答案
一个动画一个元素是如何作为动画更改单个元素的样式。
One animation one element is how it works as the animations change the styles of a single element. You can however apply delays to the animations to achieve what you want, allowing you to move pretty much everything out of JS.
此示例合并了您的 .outside
一个 .inside
动画,通过基本上附加一个逗号到规则,你的JS现在只是添加类如下 -webkit-animation-name:button-bounce,rotate,skyblue;
This example merges your .outside
an .inside
animations, by basically appending them with a comma to the rule and you JS now just adds the class like this -webkit-animation-name: button-bounce, rotate, skyblue;
.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;
}
新动画
New animations
@-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
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');
}
});
}
});
});
这篇关于将多个CSS动画组合成一个整体动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!