在CSS3中轉換和webkit動畫

我有一個JS腳本，可自動調整圖像大小併爲BounceIn效果創建CSS3動畫。他們分開工作，但不在一起..我怎樣才能結合這兩種效應？這裏的HTML/JS代碼在CSS3中轉換和webkit動畫

</head> 
<body> 

<div class="container-fluid perso" id="container"> 
    <center> 
    <img class="img-responsive row" src="../img/row.png"> 
    </center> 
    <img class="img-responsive button1 bounceIn" id="button1" src="../img/button.png"> 
</div> 


<script> 


    var $el = $("#button1"); 
    var $container=$("#container"); 

    var elHeight = $el.outerHeight(); 
    var elWidth = $el.outerWidth(); 

    var wHeight1 = $container.height(); 
    var wWidth1 = $container.width(); 

    ratioHeight=elHeight/wHeight1; 
    ratioWitdh=elWidth/wWidth1; 

    $(window).resize(function() { 

    var scale; 

    var wHeight2 = $container.height(); 
    var wWidth2 = $container.width(); 

    var elHeight2=ratioHeight*wHeight2; 
    var elWidth2=ratioWitdh*wWidth2; 


     scale = (elHeight/elWidth)/(elHeight2/elWidth2); 

     $el.css({ 
     transform: "scale(" + scale + ")" 
     }); 

    }); 


</script>

而這裏的CSS代碼：

.img-responsive.button1.bounceIn 
{ 
    position:absolute; 
    left:75%; 
    top:50%; 

    transform: scale(1); 

    -webkit-animation-name: bounceIn; 
    animation-name: bounceIn; 
    -webkit-animation-duration: .75s; 
    animation-duration: .75s; 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 

}

感謝您的幫助！

來源

2016-07-02 Nethim

對於我來說，「組合效應」看起來應該是什麼樣的情況還不清楚。 – BillyNate

JS調整圖片的容器大小 - >觸發一個事件CSS只是在開始時BounceIn效果 – Nethim

我看不出效果，我都拷入代碼到的jsfiddle但它沒有工作，是有可能看到的是你的觀點專門爲這個代碼兩行

var $el = $("#button1"); 
var $container=$("#container");

https://jsfiddle.net/2eyctrpm/

來源

2016-07-02 21:33:41 thefailtheory

在CSS3中轉換和webkit動畫

回答

相關問題