1

我有任何想在 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>
4

2 回答 2

2

是的，可以在同一个元素上链接动画：

例子：

.animate-this {
   -webkit-animation:
      first-animation 2s infinite,
      another-animation 1s;
}

谷歌先生的简单搜索！

您可以在此处阅读有关动画语法的好教程！

来自Stacker 同事的文章！

一些元素被链接动画的一个很好的例子。

已编辑

添加了一个简单的 Fiddle 示例，其中 div 使用动画 gif 设置为背景进行动画处理。

于 2012-05-10T23:15:36.610 回答
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>

于 2012-05-11T10:16:46.987 回答