How to use css media query to switch animations

Question

I want to have an animated 'carousel' of thumbnails.

However, for small devices I want my thumbnails to move in a vertical direction; And for larger devices I want my thumbnails to move in a circle.

I am looking for a css-only solution.

It seems fairly easy to do this with just one item ... but once additional items are added, there must be some means of staggering either their start moment or start position. Also for linear, there must be a way to return items that have gone out of the container div to return to make additional passes.

---

please see my solution down below ...

Answer 1

The key is in the css animation parameter: animation-delay ... and by simply staggering those everything will work (be sure to see my working plunker) ...

However, a lot of hardcoding is required for this: a unique css declaration has to be created for every individual item in the 'carousel', so imagine if you have 50 jpgs in your 'carousel' ... too verbose! (for what it is worth, I actually used php to create those individual, item-specific css declarations in a typical <?php for( /* each item */ ){ /* write its declaration */ }; echo $the_long_css_declarations_string;?>, but I don't show the php here, because this solution can be done without it)

This example uses 3 items in the 'carousel' ... (I have left out vendor-specific rules for simplicity ... (see autoprefixer to get vendor-specific rules))

  // 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>