CSS3動畫到JQUERY淡出或消失

Question

我正在試圖在css3中動畫，我想在動畫結束時使用jQuery fadeOut（）。寫完我的代碼後，轉換不起作用。

這裏是我的CSS3：

.slideRight{ 
    animation-name: slideRight; 
    -webkit-animation-name: slideRight; 

    animation-duration: 3s; 
    -webkit-animation-duration: 3s; 

    animation-timing-function: ease;  
    -webkit-animation-timing-function: ease;   

    visibility: visible !important; 
} 

@keyframes slideRight { 
    0% { 
     transform: translateX(-150%); 
    } 
    100%{ 
     transform: translateX(150%); 
     } 
} 

@-webkit-keyframes slideRight { 
    0% { 
     -webkit-transform: translateX(-150%); 
    } 
    100% { 
     -webkit-transform: translateX(150%); 
    } 
} 

這裏是jQuery的：

$(document).ready(function(){ 
    $('#yacht').fadeTo(function(){ 
    $('#yacht').css('display', 'none'); 
}); 

下面是HTML：

<!--Yacht--> 
    <div class="col-xs-12 col-md-2"> 
     <img src="images/yacht.png" class="img-responsive slideRight" id="yacht" alt="Picture of a Yacht" /> 
    </div> 

有誰知道我做錯了嗎？

Answer 1

爲什麼不使用現有的動畫淡出動畫結尾處的圖像？你可以只設置不透明度開始在像90-95%動畫，並設置opacity到0在動畫100%：

@keyframes slideRight { 
    0% { 
     transform: translateX(-150%); 
    } 
    90% { 
     opacity: 1; 
     -webkit-opacity: 1; 
     -moz-opacity: 1; 
     filter:alpha(opacity=100); 
    } 
    100% { 
     transform: translateX(150%); 
     opacity: 0; 
     -webkit-opacity: 0; 
     -moz-opacity: 0; 
     filter:alpha(opacity=0); 
     display: none; 
    } 
} 

@-webkit-keyframes slideRight { 
    0% { 
     -webkit-transform: translateX(-150%); 
    } 
    90% { 
     opacity: 1; 
     -webkit-opacity: 1; 
     -moz-opacity: 1; 
     filter:alpha(opacity=100); 
    } 
    100% { 
     -webkit-transform: translateX(150%); 
     opacity: 0; 
     -webkit-opacity: 0; 
     -moz-opacity: 0; 
     filter:alpha(opacity=0); 
     display: none; 
    } 
} 

http://jsfiddle.net/JckdJ/3/

Answer 2

有一個語法錯誤

$(document).ready(function(){ 
    $('#yacht').fadeTo(function(){ 
    $('#yacht').css('display', 'none'); 
}); 

應該

$(document).ready(function(){ 
    $('#yacht').fadeTo(function(){ 
     $('#yacht').css('display', 'none'); 
    }); <--- here 
}); 

總體來說，我覺得你想要做這樣的事情

var events = 'anomationend webkitAnimationEnd oanimationend MSAnimationEnd'; 
$(document).ready(function(){ 
    $('#yacht').on(events, function(){ 
     $('#yacht').fadeOut(); 
    }); <--- here 
}); 

會發生這種情況時，動畫結束，隨着代碼的進展，您可能需要在執行之前識別動畫