加載已旋轉的css元素

我想用CSS創建一個動畫，當頁面加載時會彈出並旋轉。我遇到的問題是，我需要在動畫開始之前旋轉元素。加載已旋轉的css元素

問題是否與此CSS代碼段，我不能告訴：

 .container { 
      background:red; 
      background-image: url(img/2012-04-12_14-06-35_758-1.jpg); 
      background-position: center; 
      background-repeat: no-repeat; 
      padding:240px; 
      padding-left: 300px; 
      padding-right: 300px; 
      padding-top:10px; 
      -webkit-animation: logo-appear 0.6s, logo-rotate 1.6s; 
      -moz-animation: logo-appear 0.6s, logo-rotate 1.6s; 
      animation: logo-appear 0.6s, logo-rotate 1.6s; 
     }

或者，如果有設置與jQuery旋轉positiong的方式。有什麼建議麼？

編輯：爲了澄清，我想要做的是

有一個div負荷，旋轉45度
彈出DIV（徽標出現）
旋轉格45度向下（標誌旋轉）

爲什麼我要這樣？我想要一個菱形元素的負載，並旋轉它使其成爲正方形。

來源

2014-09-04 Phreakradio

我想我不理解的問題......你是什麼意思「在動畫之前旋轉過嗎？「 – Brian 2014-09-04 17:59:52

你想要什麼形狀看起來像onload？水平還是角度？你想結束狀態是什麼？ – Huangism 2014-09-04 18:03:30

這是'-webkit-animation：logo-出現0.6s，logo-rotate 0s;'你想實現什麼？（在0秒內旋轉） – 2014-09-04 18:10:42

想通了。這是一個隨着彈出順序發生旋轉的問題。

的jsfiddle：http://jsfiddle.net/s8hae5dz/額外的動畫

先前的例子：

@-webkit-keyframes logo-appear{        
    0% { 
     opacity: 0; 
     -webkit-transform: scale(0.5); 
    } 
    20% { 
     opacity: 1; 
     -webkit-transform: scale(1.2); 
    } 
    60% { 
     opacity: 1; 
     -webkit-transform: scale(1.2); 
    } 
    100% {  
     -webkit-transform: scale(1); 
    } 
}

目前：

@-webkit-keyframes logo-appear{        
    0% { 
     opacity: 0; 
     -webkit-transform: scale(0.5) rotate(-45deg); 
    } 
    20% { 
     opacity: 1; 
     -webkit-transform: scale(1.2) rotate(-45deg); 
    } 
    60% { 
     opacity: 1; 
     -webkit-transform: scale(1.2) rotate(-45deg); 
    } 
    100% {  
     -webkit-transform: scale(1) rotate(-45deg); 
    } 
}

來源

2014-09-05 03:59:19 Phreakradio

加載已旋轉的css元素

回答

相關問題