css-animation-delay

    1.0.10 • Public • Published

    CSS ANIMATION DELAY

    Mobile-first classes for an animation-delay scale. Set the desired animation-delay on any element for any breakpoint. Base class names are namespaced across three breakpoints:

    • -ns = not-small (covers everything larger than mobile)
    • -m = medium
    • -l = large

    Install

    Grab the css partial from github and include it in your project or alternatively you can install it via npm:

    npm install --save-dev css-animation-delay
    

    View on npm

    File Size

    1.2K animation-delay.css 904B animation-delay.min.css 200B minified and gzipped

    The Code

      .a-delay-1 { animation-delay: .5s; }
      .a-delay-2 { animation-delay: 1s; }
      .a-delay-3 { animation-delay: 2s; }
      .a-delay-4 { animation-delay: 4s; }
      .a-delay-5 { animation-delay: 8s; }
      .a-delay-6 { animation-delay: 16s; }
    
    
      /* First breakpoint and larger */
    @media screen and (min-width: 48em) {
      .a-delay-1-ns { animation-delay: .5s; }
      .a-delay-2-ns { animation-delay: 1s; }
      .a-delay-3-ns { animation-delay: 2s; }
      .a-delay-4-ns { animation-delay: 4s; }
      .a-delay-5-ns { animation-delay: 8s; }
      .a-delay-6-ns { animation-delay: 16s; }
    }
    
      /* Second breakpoint */
    @media screen and (min-width: 48em) and (max-width: 64em) {
      .a-delay-1-m { animation-delay: .5s; }
      .a-delay-2-m { animation-delay: 1s; }
      .a-delay-3-m { animation-delay: 2s; }
      .a-delay-4-m { animation-delay: 4s; }
      .a-delay-5-m { animation-delay: 8s; }
      .a-delay-6-m { animation-delay: 16s; }
    }
    
      /* Third breakpoint */
    @media screen and (min-width: 64em)  {
      .a-delay-1-l { animation-delay: .5s; }
      .a-delay-2-l { animation-delay: 1s; }
      .a-delay-3-l { animation-delay: 2s; }
      .a-delay-4-l { animation-delay: 4s; }
      .a-delay-5-l { animation-delay: 8s; }
      .a-delay-6-l { animation-delay: 16s; }
    }
    
    

    Author

    http://mrmrs.cc - Entire internet gateway to all things mrmrs http://mrmrs.io - Open source projects

    License

    ISC

    Install

    npm i css-animation-delay

    DownloadsWeekly Downloads

    16

    Version

    1.0.10

    License

    MIT

    Last publish

    Collaborators

    • mrmrs