1

CSS3で右から左に回転して移動したい画像があります。少し遅れて、画像を新しい現在の状態から上に移動し、コンテナからフェードアウトしたいと思います。

キーフレームといくつかのjQueryを使用してアニメーションをトリガーするのに十分簡単に​​最初のアニメーションを実現できますが、2番目のアニメーションを追加しようとすると、画像は初期状態に戻り、2番目のアニメーションを実行します。これが私がこれまでに持っているものです

@-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

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 に答える