我有任何想在CSS3中旋转并从右向左移动的图像。在短暂的延迟后，我想将图像从其新的当前状态向上移动并将其淡出容器。
我能够使用关键帧和一些jQuery轻松地实现第一个动画来触发动画但是每当我尝试添加第二个动画时，图像返回到它的初始状态然后执行第二个动画。这是我到目前为止所拥有的
@-webkit-keyframes image-slide-right-to-left {
0% { opacity: 1; }
100% { opacity: 1; -webkit-transform: translate(-400px, 60px) rotate(-55deg);}
}
@-webkit-keyframes image-slide-up-and-out {
0% { opacity: 1; }
100% { opacity: 1; -webkit-transform: translate(400px, 260px) rotate(-55deg);}
}
.image-slide-right-to-left{
-webkit-animation: image-slide-right-to-left 3s, image-slide-up-and-out 3s;
-moz-animation: image-slide-right-to-left 3s, image-slide-up-and-out 3s;
-ms-animation: image-slide-right-to-left 3s, image-slide-up-and-out 3s;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
-webkit-animation-delay: 4s, 8s;
-moz-animation-delay: 4s, 8s;
-ms-animation-delay: 4s, 8s;
animation-timing-function: ease-in-out;
}
<script>
$(window).load(function() {
$('.feature1 .implant').addClass('image-slide-right-to-left');
</script>
答案 0 :(得分：2)
是的，可以在同一元素上链接动画：
示例：
.animate-this {
-webkit-animation:
first-animation 2s infinite,
another-animation 1s;
}
在Mr. Google进行简单搜索！
您可以阅读有关animations syntax here!
的优秀教程 的文章某些元素chained animated的一个很好的例子。
<强> EDITED
添加了一个simple Fiddle example，其中div被设置为动画gif设置为背景。
答案 1 :(得分：0)
我有我想要的解决方案。不确定它是否是最好的方法，但无论如何它是
<cfsavecontent variable="tempHeadCode">
<style type="text/css">
sup{font-size:0.5em;}
#featureAnimation {
height: 350px;
overflow: hidden;
position: relative;
margin: 0 0 -30px -96px;
width: 960px;
color:#434343;
}
.feature1 .title {
position: absolute;
top: 20px;
left: 5%;
font-size:3em;
line-height:.8em;
letter-spacing:-2px;
word-spacing:-1px;
}
.feature1 .title2 {
position: absolute;
top: 150px;
left: 5%;
font-size:2em;
line-height:.8em;
letter-spacing:-2px;
word-spacing:-1px;
}
.feature1 .copy {
position: absolute;
bottom: 0px;
right: 5%;
font-size:1.4em;
width:30%;
opacity:0;
}
.implant{
position: absolute;
right: 1%;
bottom: 0;
}
.image-slide-right-to-left{
transform: translate(-400px, 70px) rotate(-60deg);
-ms-transform: translate(-400px, 70px) rotate(-60deg);
-moz-transform: translate(-400px, 70px) rotate(-60deg);
-o-transform: translate(-400px, 70px) rotate(-60deg);
-webkit-transform: translate(-400px, 70px) rotate(-60deg);
transition-delay: 2s;
-ms-transition-delay: 2s;
-moz-transition-delay: 2s;
-o-transition-delay: 2s;
-webkit-transition-delay: 2s;
transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-duration: 2s;
-ms-transition-duration: 2s;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
}
.title-fly-out-top-left{
-transform: translate(-200px, -200px) rotate(0deg);
-moz-transform: translate(-200px, -200px) rotate(0deg);
-ms-transform: translate(-200px, -200px) rotate(0deg);
-o-transform: translate(-200px, -200px) rotate(0deg);
-webkit-transform: translate(-200px, -200px) rotate(0deg);
transition-delay: 2s;
-ms-transition-delay: 2s;
-moz-transition-delay: 2s;
-o-transition-delay: 2s;
-webkit-transition-delay: 2s;
transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-duration: 3s;
-ms-transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
-o-transition-duration: 3s;
opacity: 0;
}
.sub-title-fly-out-left{
-transform: translate(-400px, 0px) rotate(-10deg);
-moz-transform: translate(-400px, 0px) rotate(-10deg);
-ms-transform: translate(-400px, 0px) rotate(-10deg);
-o-transform: translate(-400px, 0px) rotate(-10deg);
-webkit-transform: translate(-400px, 0px) rotate(-10deg);
transition-delay: 2s;
-ms-transition-delay: 2s;
-moz-transition-delay: 2s;
-o-transition-delay: 2s;
-webkit-transition-delay: 2s;
transition-duration: 2.5s;
-ms-transition-duration: 2.5s;
-moz-transition-duration: 2.5s;
-webkit-transition-duration: 2.5s;
-o-transition-duration: 2.5s;
transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
opacity: 0;
}
.image-slide-down-and-out{
transform: translate(-400px, 450px) rotate(-60deg);
-ms-transform: translate(-400px, 450px) rotate(-60deg);
-moz-transform: translate(-400px, 450px) rotate(-60deg);
-o-transform: translate(-400px, 450px) rotate(-60deg);
-webkit-transform: translate(-450px, 400px) rotate(-60deg);
transition-delay: 6s;
-ms-transition-delay: 6s;
-moz-transition-delay: 6s;
-o-transition-delay: 6s;
-webkit-transition-delay: 6s;
transition-duration: 3s;
-ms-transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
-o-transition-duration: 3s;
transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
opacity: 0;
}
.copy-fade-in-bottom-mid {
-transform: translate(0px, -100px) rotate(0deg);
-moz-transform: translate(0px, -100px) rotate(0deg);
-ms-transform: translate(0px, -100px) rotate(0deg);
-o-transform: translate(0px, -100px) rotate(0deg);
-webkit-transform: translate(0px, -100px) rotate(0deg);
transition-delay: 3s;
-ms-transition-delay: 3s;
-moz-transition-delay: 3s;
-o-transition-delay: 3s;
-webkit-transition-delay: 3s;
transition-duration: 3s;
-ms-transition-duration: 3s;
-moz-transition-duration: 3s;
-webkit-transition-duration: 3s;
-o-transition-duration: 3s;
transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
opacity: 1 !important;
display:block;
}
.copy-fade-out-mid-top {
transform: translate(0px, -400px) rotate(0deg);
-moz-transform: translate(0px, -400px) rotate(0deg);
-ms-transform: translate(0px, -400px) rotate(0deg);
-o-transform: translate(0px, -400px) rotate(0deg);
-webkit-transform: translate(0px, -400px) rotate(0deg);
transition-delay: 6s;
-ms-transition-delay: 6s;
-moz-transition-delay: 6s;
-o-transition-delay: 6s;
-webkit-transition-delay: 6s;
transition-duration: 2s;
-ms-transition-duration: 2s;
-moz-transition-duration: 2s;
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
transition-timing-function: ease-in-out;
-ms-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-webkit-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
opacity: 0;
}
</style>
<script>
$(window).load(function() {
$('.feature1 .title').addClass('title-fly-out-top-left');
$('.feature1 .title2').addClass('sub-title-fly-out-left');
$('.feature1 img').addClass('image-slide-right-to-left').bind("webkitTransitionEnd", function() {
$(this).addClass('image-slide-down-and-out');
$('.feature1 .copy').addClass('copy-fade-out-mid-top');
});
$('.feature1 .copy').addClass('copy-fade-in-bottom-mid').bind("webkitTransitionEnd", function() {
$(this).addClass('copy-fade-out-mid-top');
});
});
</script>
</cfsavecontent>
<cfhtmlhead text="#tempHeadCode#">
<div id="featureAnimation">
<div class="feature1">
<cfoutput>
<img src="#attributes.imageDirectory#/01implant.png" class="implant" />
<p class="title">Blah blah blah</p>
<p class="title2">Blah blah blah</p>
<p class="copy">Blah blah blah</p>
</cfoutput>
</div>