css - 如何使用css媒体查询切换动画

Question

我想要一个缩略图的动画“轮播”。

但是，对于小型设备，我希望我的缩略图在垂直方向上移动；对于较大的设备，我希望我的缩略图可以绕圈移动。

我正在寻找一个纯 css 的解决方案。

似乎只用一个元素就可以很容易地做到这一点……但是一旦添加了其他元素，就必须有一些方法来错开它们的开始时刻或开始位置。同样对于线性，必须有一种方法可以返回已经离开容器 div 的元素以返回以进行额外的传递。

---

请在下方查看我的解决方案...

Answer 1

关键在于 css 动画参数:animation-delay ... 通过简单地错开这些一切都会起作用(一定要看到我的工作 plunker)...

但是，为此需要进行大量硬编码:必须为“旋转木马”中的每个 单独元素创建一个唯一的 css 声明，因此想象一下如果您的“旋转木马”中有 50 个 jpg ' ... 太啰嗦了! (对于它的值(value)，我实际上使用 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>