如何在javascript中使用css動畫來縮放div

-4

我正在嘗試在JavaScript函數被調用時應用縮放動畫。但我無法做到這一點。這裏我有一個div，裏面包含一些數據。最初div是隱藏的，翻轉函數應該縮放div。但縮放不是通過javascript函數發生的。我該如何做？如何在javascript中使用css動畫來縮放div

這裏是我所嘗試過的。

function flip1(){ 
    $('#category-1').delay(100).css('display', 'none'); 
    $('.box-1').delay(100).css('display', 'block'); 
    $('.box-1').transition({ 
     perspective: '100px', 
     rotateY: '360deg' 


     width: 100px; 
     height: 100px; 
     background: red; 
     -webkit-transition: transform 0.3s; 
     transform:scaleX(1); 
     animation-name: example; 
     animation-duration: 0.3s;  
    } 

    @keyframes example { 
     25% {transform:scaleX(0.060);} 
     50% {transform:scaleX(0.500);} 
     75% {transform:scaleX(0.700);} 
     100% {transform:scaleX(1);} 
    }  
     },200) 
    setTimeout(startSlidecat1, 2000); 
    }

來源

2015-06-25 Mithun Raikar

顯示HTML或作出的jsfiddle – loli

你混合代碼（JS和CSS） .....語法非常錯誤......您可能會收到一些JavaScript錯誤......調試您的代碼（F12）並查看它是否有意義... – Federico

寫一個CSS類過渡和點擊這個類添加所需的div

div { 
    width: 100px; 
    height: 100px; 
    background: red; 
    -webkit-transition: width 2s; 
    transition: width 2s; 
} 

.scale-it { 
    width: 300px; 
} 


$('#divid').addClass('scale-it');

來源

2015-06-25 13:07:35

如何在javascript中使用css動畫來縮放div

回答

相關問題