如何使用CSS媒體查詢切換動畫

我想要一個動畫'旋轉木馬'的縮略圖。如何使用CSS媒體查詢切換動畫

但是，對於小型設備，我希望縮略圖可以沿垂直方向移動;對於較大的設備，我希望我的縮略圖可以循環移動。

我正在尋找一個只有css的解決方案。

這似乎很容易做到這一點只有一個項目...但一旦添加了額外的項目，必須有一些交錯他們的開始時刻或開始位置的手段。此外，對於線性，必須有一種方法可以返回已離開容器div的項目以返回以進行其他傳遞。

請參閱我的解決方案樓下......

來源

2016-02-19 dsdsdsdsd

這聽起來更就像工作的簡要而不是問題。你能告訴我們你試過的代碼以及你被卡住的地方嗎？ –

的關鍵是在CSS動畫參數：動畫延遲 ...和令人歎服的一切就可以了（一定要看清我的工作plunker）...

然而，需要很多硬編碼的這個：獨特的CSS聲明已經在「旋轉木馬」每個別項目被創建，所以想象一下，如果你在50個JPG文件你的'旋轉木馬'...太冗長了！（什麼是值得的，我實際使用PHP在一個典型的<?php for(/* each item */){ /* write its declaration */ }; echo $the_long_css_declarations_string;?>創建這些個人，項目特定CSS聲明，但我這裏不顯示PHP，因爲這種解決方案可以在沒有它做）

這個例子使用3項中的「旋轉木馬」 ... （我已經離開了爲簡單起見，特定供應商的規則......（見autoprefixer獲得供應商特定的規則））

// css 
    @media (min-width: 100px) 
    { 
     .carousel_item 
     { position : absolute ; 
      top  : 5%  ; 
      left  : -10%  ; 
      width : auto  ; 
      height : 90%  ; 
     } 
     .carousel_item[data-index='0'] 
     { animation: the_name 6s linear 0s infinite normal ; 
     } 
     .carousel_item[data-index='1'] 
     { animation: the_name 6s linear 2s infinite normal ; 
     } 
     .carousel_item[data-index='2'] 
     { animation: the_name 6s linear 4s infinite normal ; 
     } 
     @keyframes the_name  
     { 0% { transform: translate( -0%) ; } 
      100%{ transform: translate(5000%) ; } 
     }   
    } 
    @media (min-width: 500px) 
    { 
     .carousel_item 
     { 
      position: absolute; 
      top  : 50%; 
      left  : 50%; 
      width : auto; 
      height : 10%; 
      border : solid red 1px ; 
     } 
     .carousel_item[data-index='0'] 
     { animation: the_name 6s linear 0s infinite normal ; 
     } 
     .carousel_item[data-index='1'] 
     { animation: the_name 6s linear 2s infinite normal ; 
     } 
     .carousel_item[data-index='2'] 
     { animation: the_name 6s linear 4s infinite normal ; 
     } 
     @keyframes the_name  
     { 0% { transform: rotate(0deg) translateX(450%) rotate(0deg) ; } 
      100%{ transform: rotate(360deg) translateX(450%) rotate(-360deg); } 
     }   
    } 


    // html 
    <span id = "carousel" > 
    <span data-index = "0" 
      class  = "carousel_item" > 
     0 
    </span> 
    <span data-index = "1" 
      class  = "carousel_item" > 
     1 
    </span> 
    <span data-index = "2" 
      class  = "carousel_item" > 
     2 
    </span> 
    </span>

來源

2016-02-21 15:42:00 dsdsdsdsd

如何使用CSS媒體查詢切換動畫

回答

相關問題