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

Question

我想要一个动画 'carousel' 缩略图。

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

我正在寻找仅 css 的解决方案。

似乎只用一个项目就可以很容易地做到这一点...但是一旦添加了其他项目，就必须有一些方法来错开它们的开始时刻或开始位置。同样对于线性，必须有一种方法 return 已经从容器中取出的物品 div 到 return 以进行额外的传递。

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

Answer 1

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

然而，为此需要大量的硬编码：必须为 'carousel' 中的每个个单独项目创建一个唯一的 css 声明，想象一下，如果您的 'carousel' 中有 50 张 jpg... 太冗长了！（对于它的价值，我实际上使用 php 在典型的 <?php for( /* each item */ ){ /* write its declaration */ }; echo $the_long_css_declarations_string;?> 中创建了那些单独的、特定于项目的 css 声明，但我没有展示php这里，因为没有它也可以解决这个问题）

此示例使用了 'carousel' 中的 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>

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

How to use css media query to switch animations

css

animation

media-queries

responsive-design