1.0.10 • Published 9 years ago

css-animation-delay v1.0.10

Weekly downloads
-
License
MIT
Repository
-
Last release
9 years ago

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

1.0.10

9 years ago

1.0.9

9 years ago

1.0.8

9 years ago

1.0.7

9 years ago

1.0.6

9 years ago

1.0.5

9 years ago

1.0.2

9 years ago

1.0.1

9 years ago

1.0.0

10 years ago

0.0.8

10 years ago

0.0.7

11 years ago

0.0.5

11 years ago

0.0.4

11 years ago

0.0.3

11 years ago

0.0.2

11 years ago

0.0.1

11 years ago