CSS3의 변형 및 웹킷 애니메이션

이미지를 자동으로 크기를 조절하는 JS 스크립트와 BounceIn 효과를위한 CSS3 애니메이션이 있습니다. 그것들은 따로 따로 잘 작동하지만 함께하지는 않습니다. 어떻게 두 가지 효과를 결합 할 수 있습니까? 다음은 HTML/JS 코드CSS3의 변형 및 웹킷 애니메이션

</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의 변형 및 웹킷 애니메이션

답변

관련 문제