├── .gitignore ├── LICENSE.txt ├── package.json ├── css ├── animation-duration.css ├── animation-duration.min.css ├── css-animation-duration.min.css └── css-animation-duration.css ├── src └── css-animation-duration.css └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # List of files for git to ignore 2 | 3 | .DS_Store 4 | .AppleDouble 5 | .LSOverride 6 | 7 | # Icon must end with two \r 8 | Icon 9 | 10 | 11 | # Thumbnails 12 | ._* 13 | 14 | # Files that might appear on external disk 15 | .Spotlight-V100 16 | .Trashes 17 | 18 | # Directories potentially created on remote AFP share 19 | .AppleDB 20 | .AppleDesktop 21 | Network Trash Folder 22 | Temporary Items 23 | .apdisk 24 | 25 | # Vim 26 | Session.vim 27 | 28 | # Node 29 | node_modules/* 30 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | ISC License (ISC) 2 | Copyright (c) 2018, Adam Morse 3 | 4 | Permission to use, copy, modify, and/or distribute this software for any 5 | purpose with or without fee is hereby granted, provided that the above 6 | copyright notice and this permission notice appear in all copies. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH 9 | REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND 10 | FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, 11 | INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM 12 | LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR 13 | OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR 14 | PERFORMANCE OF THIS SOFTWARE. 15 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-animation-duration", 3 | "style": "animation-duration.css", 4 | "version": "1.0.10", 5 | "homepage": "http://github.com/mrmrs/css-animation-duration", 6 | "description": "Css module of single purpose classes for animation duration", 7 | "keywords": [ 8 | "css", 9 | "oocss", 10 | "animation-duration" 11 | ], 12 | "css-animation-duration": { 13 | "type": "git", 14 | "url": "http://github.com/mrmrs/css-animation-duration.git" 15 | }, 16 | "bugs": { 17 | "url": "https://github.com/mrmrs/css-animation-duration/issues", 18 | "email": "hi@mrmrs.cc" 19 | }, 20 | "author": { 21 | "name": "Adam Morse", 22 | "email": "hi@mrmrs.cc", 23 | "url": "http://mrmrs.cc" 24 | }, 25 | "contributors": [ 26 | { 27 | "name": "Adam Morse", 28 | "email": "hi@mrmrs.cc" 29 | } 30 | ], 31 | "license": "MIT", 32 | "devDependencies": { 33 | "tachyons-cli": "^1.3.0" 34 | }, 35 | "scripts": { 36 | "start": "tachyons src/css-animation-duration.css > css/css-animation-duration.css && tachyons src/css-animation-duration.css --minify > css/css-animation-duration.min.css && tachyons src/css-animation-duration.css --generate-docs --package=../../package.json > readme.md" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /css/animation-duration.css: -------------------------------------------------------------------------------- 1 | /* 2 | ANIMATION DURATION 3 | */ 4 | 5 | .a-dur0 { animation-duration: 0; } 6 | .a-dur1 { animation-duration: .1s; } 7 | .a-dur2 { animation-duration: .2s; } 8 | .a-dur3 { animation-duration: .4s; } 9 | .a-dur4 { animation-duration: .5s; } 10 | .a-dur5 { animation-duration: .7s; } 11 | .a-dur6 { animation-duration: 1s; } 12 | .a-dur7 { animation-duration: 1.5s; } 13 | .a-dur8 { animation-duration: 2s; } 14 | .a-dur9 { animation-duration: 2.5s; } 15 | .a-dur10 { animation-duration: 4s; } 16 | .a-dur11 { animation-duration: 8s; } 17 | .a-dur12 { animation-duration: 12s; } 18 | 19 | @media screen and (min-width: 48em) { 20 | .a-dur0-ns { animation-duration: 0; } 21 | .a-dur1-ns { animation-duration: .1s; } 22 | .a-dur2-ns { animation-duration: .2s; } 23 | .a-dur3-ns { animation-duration: .4s; } 24 | .a-dur4-ns { animation-duration: .5s; } 25 | .a-dur5-ns { animation-duration: .7s; } 26 | .a-dur6-ns { animation-duration: 1s; } 27 | .a-dur7-ns { animation-duration: 1.5s; } 28 | .a-dur8-ns { animation-duration: 2s; } 29 | .a-dur9-ns { animation-duration: 2.5s; } 30 | .a-dur10-ns { animation-duration: 4s; } 31 | .a-dur11-ns { animation-duration: 8s; } 32 | .a-dur12-ns { animation-duration: 12s; } 33 | } 34 | 35 | @media screen and (min-width:48em) and (max-width: 64em) { 36 | .a-dur0-m { animation-duration: 0; } 37 | .a-dur1-m { animation-duration: .1s; } 38 | .a-dur2-m { animation-duration: .2s; } 39 | .a-dur3-m { animation-duration: .4s; } 40 | .a-dur4-m { animation-duration: .5s; } 41 | .a-dur5-m { animation-duration: .7s; } 42 | .a-dur6-m { animation-duration: 1s; } 43 | .a-dur7-m { animation-duration: 1.5s; } 44 | .a-dur8-m { animation-duration: 2s; } 45 | .a-dur9-m { animation-duration: 2.5s; } 46 | .a-dur10-m { animation-duration: 4s; } 47 | .a-dur11-m { animation-duration: 8s; } 48 | .a-dur12-m { animation-duration: 12s; } 49 | } 50 | 51 | @media screen and (min-width: 64em) { 52 | .a-dur0-l { animation-duration: 0; } 53 | .a-dur1-l { animation-duration: .1s; } 54 | .a-dur2-l { animation-duration: .2s; } 55 | .a-dur3-l { animation-duration: .4s; } 56 | .a-dur4-l { animation-duration: .5s; } 57 | .a-dur5-l { animation-duration: .7s; } 58 | .a-dur6-l { animation-duration: 1s; } 59 | .a-dur7-l { animation-duration: 1.5s; } 60 | .a-dur8-l { animation-duration: 2s; } 61 | .a-dur9-l { animation-duration: 2.5s; } 62 | .a-dur10-l { animation-duration: 4s; } 63 | .a-dur11-l { animation-duration: 8s; } 64 | .a-dur12-l { animation-duration: 12s; } 65 | } 66 | -------------------------------------------------------------------------------- /css/animation-duration.min.css: -------------------------------------------------------------------------------- 1 | /* 2 | ANIMATION DURATION 3 | */ 4 | 5 | .a-dur0 { animation-duration: 0; } 6 | .a-dur1 { animation-duration: .1s; } 7 | .a-dur2 { animation-duration: .2s; } 8 | .a-dur3 { animation-duration: .4s; } 9 | .a-dur4 { animation-duration: .5s; } 10 | .a-dur5 { animation-duration: .7s; } 11 | .a-dur6 { animation-duration: 1s; } 12 | .a-dur7 { animation-duration: 1.5s; } 13 | .a-dur8 { animation-duration: 2s; } 14 | .a-dur9 { animation-duration: 2.5s; } 15 | .a-dur10 { animation-duration: 4s; } 16 | .a-dur11 { animation-duration: 8s; } 17 | .a-dur12 { animation-duration: 12s; } 18 | 19 | @media screen and (min-width: 48em) { 20 | .a-dur0-ns { animation-duration: 0; } 21 | .a-dur1-ns { animation-duration: .1s; } 22 | .a-dur2-ns { animation-duration: .2s; } 23 | .a-dur3-ns { animation-duration: .4s; } 24 | .a-dur4-ns { animation-duration: .5s; } 25 | .a-dur5-ns { animation-duration: .7s; } 26 | .a-dur6-ns { animation-duration: 1s; } 27 | .a-dur7-ns { animation-duration: 1.5s; } 28 | .a-dur8-ns { animation-duration: 2s; } 29 | .a-dur9-ns { animation-duration: 2.5s; } 30 | .a-dur10-ns { animation-duration: 4s; } 31 | .a-dur11-ns { animation-duration: 8s; } 32 | .a-dur12-ns { animation-duration: 12s; } 33 | } 34 | 35 | @media screen and (min-width:48em) and (max-width: 64em) { 36 | .a-dur0-m { animation-duration: 0; } 37 | .a-dur1-m { animation-duration: .1s; } 38 | .a-dur2-m { animation-duration: .2s; } 39 | .a-dur3-m { animation-duration: .4s; } 40 | .a-dur4-m { animation-duration: .5s; } 41 | .a-dur5-m { animation-duration: .7s; } 42 | .a-dur6-m { animation-duration: 1s; } 43 | .a-dur7-m { animation-duration: 1.5s; } 44 | .a-dur8-m { animation-duration: 2s; } 45 | .a-dur9-m { animation-duration: 2.5s; } 46 | .a-dur10-m { animation-duration: 4s; } 47 | .a-dur11-m { animation-duration: 8s; } 48 | .a-dur12-m { animation-duration: 12s; } 49 | } 50 | 51 | @media screen and (min-width: 64em) { 52 | .a-dur0-l { animation-duration: 0; } 53 | .a-dur1-l { animation-duration: .1s; } 54 | .a-dur2-l { animation-duration: .2s; } 55 | .a-dur3-l { animation-duration: .4s; } 56 | .a-dur4-l { animation-duration: .5s; } 57 | .a-dur5-l { animation-duration: .7s; } 58 | .a-dur6-l { animation-duration: 1s; } 59 | .a-dur7-l { animation-duration: 1.5s; } 60 | .a-dur8-l { animation-duration: 2s; } 61 | .a-dur9-l { animation-duration: 2.5s; } 62 | .a-dur10-l { animation-duration: 4s; } 63 | .a-dur11-l { animation-duration: 8s; } 64 | .a-dur12-l { animation-duration: 12s; } 65 | } 66 | -------------------------------------------------------------------------------- /src/css-animation-duration.css: -------------------------------------------------------------------------------- 1 | /* 2 | ANIMATION DURATION 3 | */ 4 | 5 | .a-dur0 { animation-duration: 0; } 6 | .a-dur1 { animation-duration: .1s; } 7 | .a-dur2 { animation-duration: .2s; } 8 | .a-dur3 { animation-duration: .4s; } 9 | .a-dur4 { animation-duration: .5s; } 10 | .a-dur5 { animation-duration: .7s; } 11 | .a-dur6 { animation-duration: 1s; } 12 | .a-dur7 { animation-duration: 1.5s; } 13 | .a-dur8 { animation-duration: 2s; } 14 | .a-dur9 { animation-duration: 2.5s; } 15 | .a-dur10 { animation-duration: 4s; } 16 | .a-dur11 { animation-duration: 8s; } 17 | .a-dur12 { animation-duration: 12s; } 18 | 19 | @media screen and (min-width: 48em) { 20 | .a-dur0-ns { animation-duration: 0; } 21 | .a-dur1-ns { animation-duration: .1s; } 22 | .a-dur2-ns { animation-duration: .2s; } 23 | .a-dur3-ns { animation-duration: .4s; } 24 | .a-dur4-ns { animation-duration: .5s; } 25 | .a-dur5-ns { animation-duration: .7s; } 26 | .a-dur6-ns { animation-duration: 1s; } 27 | .a-dur7-ns { animation-duration: 1.5s; } 28 | .a-dur8-ns { animation-duration: 2s; } 29 | .a-dur9-ns { animation-duration: 2.5s; } 30 | .a-dur10-ns { animation-duration: 4s; } 31 | .a-dur11-ns { animation-duration: 8s; } 32 | .a-dur12-ns { animation-duration: 12s; } 33 | } 34 | 35 | @media screen and (min-width:48em) and (max-width: 64em) { 36 | .a-dur0-m { animation-duration: 0; } 37 | .a-dur1-m { animation-duration: .1s; } 38 | .a-dur2-m { animation-duration: .2s; } 39 | .a-dur3-m { animation-duration: .4s; } 40 | .a-dur4-m { animation-duration: .5s; } 41 | .a-dur5-m { animation-duration: .7s; } 42 | .a-dur6-m { animation-duration: 1s; } 43 | .a-dur7-m { animation-duration: 1.5s; } 44 | .a-dur8-m { animation-duration: 2s; } 45 | .a-dur9-m { animation-duration: 2.5s; } 46 | .a-dur10-m { animation-duration: 4s; } 47 | .a-dur11-m { animation-duration: 8s; } 48 | .a-dur12-m { animation-duration: 12s; } 49 | } 50 | 51 | @media screen and (min-width: 64em) { 52 | .a-dur0-l { animation-duration: 0; } 53 | .a-dur1-l { animation-duration: .1s; } 54 | .a-dur2-l { animation-duration: .2s; } 55 | .a-dur3-l { animation-duration: .4s; } 56 | .a-dur4-l { animation-duration: .5s; } 57 | .a-dur5-l { animation-duration: .7s; } 58 | .a-dur6-l { animation-duration: 1s; } 59 | .a-dur7-l { animation-duration: 1.5s; } 60 | .a-dur8-l { animation-duration: 2s; } 61 | .a-dur9-l { animation-duration: 2.5s; } 62 | .a-dur10-l { animation-duration: 4s; } 63 | .a-dur11-l { animation-duration: 8s; } 64 | .a-dur12-l { animation-duration: 12s; } 65 | } 66 | -------------------------------------------------------------------------------- /css/css-animation-duration.min.css: -------------------------------------------------------------------------------- 1 | .a-dur0{-webkit-animation-duration:0;animation-duration:0}.a-dur1{-webkit-animation-duration:.1s;animation-duration:.1s}.a-dur2{-webkit-animation-duration:.2s;animation-duration:.2s}.a-dur3{-webkit-animation-duration:.4s;animation-duration:.4s}.a-dur4{-webkit-animation-duration:.5s;animation-duration:.5s}.a-dur5{-webkit-animation-duration:.7s;animation-duration:.7s}.a-dur6{-webkit-animation-duration:1s;animation-duration:1s}.a-dur7{-webkit-animation-duration:1.5s;animation-duration:1.5s}.a-dur8{-webkit-animation-duration:2s;animation-duration:2s}.a-dur9{-webkit-animation-duration:2.5s;animation-duration:2.5s}.a-dur10{-webkit-animation-duration:4s;animation-duration:4s}.a-dur11{-webkit-animation-duration:8s;animation-duration:8s}.a-dur12{-webkit-animation-duration:12s;animation-duration:12s}@media screen and (min-width:48em){.a-dur0-ns{-webkit-animation-duration:0;animation-duration:0}.a-dur1-ns{-webkit-animation-duration:.1s;animation-duration:.1s}.a-dur2-ns{-webkit-animation-duration:.2s;animation-duration:.2s}.a-dur3-ns{-webkit-animation-duration:.4s;animation-duration:.4s}.a-dur4-ns{-webkit-animation-duration:.5s;animation-duration:.5s}.a-dur5-ns{-webkit-animation-duration:.7s;animation-duration:.7s}.a-dur6-ns{-webkit-animation-duration:1s;animation-duration:1s}.a-dur7-ns{-webkit-animation-duration:1.5s;animation-duration:1.5s}.a-dur8-ns{-webkit-animation-duration:2s;animation-duration:2s}.a-dur9-ns{-webkit-animation-duration:2.5s;animation-duration:2.5s}.a-dur10-ns{-webkit-animation-duration:4s;animation-duration:4s}.a-dur11-ns{-webkit-animation-duration:8s;animation-duration:8s}.a-dur12-ns{-webkit-animation-duration:12s;animation-duration:12s}}@media screen and (min-width:48em) and (max-width:64em){.a-dur0-m{-webkit-animation-duration:0;animation-duration:0}.a-dur1-m{-webkit-animation-duration:.1s;animation-duration:.1s}.a-dur2-m{-webkit-animation-duration:.2s;animation-duration:.2s}.a-dur3-m{-webkit-animation-duration:.4s;animation-duration:.4s}.a-dur4-m{-webkit-animation-duration:.5s;animation-duration:.5s}.a-dur5-m{-webkit-animation-duration:.7s;animation-duration:.7s}.a-dur6-m{-webkit-animation-duration:1s;animation-duration:1s}.a-dur7-m{-webkit-animation-duration:1.5s;animation-duration:1.5s}.a-dur8-m{-webkit-animation-duration:2s;animation-duration:2s}.a-dur9-m{-webkit-animation-duration:2.5s;animation-duration:2.5s}.a-dur10-m{-webkit-animation-duration:4s;animation-duration:4s}.a-dur11-m{-webkit-animation-duration:8s;animation-duration:8s}.a-dur12-m{-webkit-animation-duration:12s;animation-duration:12s}}@media screen and (min-width:64em){.a-dur0-l{-webkit-animation-duration:0;animation-duration:0}.a-dur1-l{-webkit-animation-duration:.1s;animation-duration:.1s}.a-dur2-l{-webkit-animation-duration:.2s;animation-duration:.2s}.a-dur3-l{-webkit-animation-duration:.4s;animation-duration:.4s}.a-dur4-l{-webkit-animation-duration:.5s;animation-duration:.5s}.a-dur5-l{-webkit-animation-duration:.7s;animation-duration:.7s}.a-dur6-l{-webkit-animation-duration:1s;animation-duration:1s}.a-dur7-l{-webkit-animation-duration:1.5s;animation-duration:1.5s}.a-dur8-l{-webkit-animation-duration:2s;animation-duration:2s}.a-dur9-l{-webkit-animation-duration:2.5s;animation-duration:2.5s}.a-dur10-l{-webkit-animation-duration:4s;animation-duration:4s}.a-dur11-l{-webkit-animation-duration:8s;animation-duration:8s}.a-dur12-l{-webkit-animation-duration:12s;animation-duration:12s}} 2 | 3 | -------------------------------------------------------------------------------- /css/css-animation-duration.css: -------------------------------------------------------------------------------- 1 | /* 2 | ANIMATION DURATION 3 | */ 4 | .a-dur0 { -webkit-animation-duration: 0; animation-duration: 0; } 5 | .a-dur1 { -webkit-animation-duration: .1s; animation-duration: .1s; } 6 | .a-dur2 { -webkit-animation-duration: .2s; animation-duration: .2s; } 7 | .a-dur3 { -webkit-animation-duration: .4s; animation-duration: .4s; } 8 | .a-dur4 { -webkit-animation-duration: .5s; animation-duration: .5s; } 9 | .a-dur5 { -webkit-animation-duration: .7s; animation-duration: .7s; } 10 | .a-dur6 { -webkit-animation-duration: 1s; animation-duration: 1s; } 11 | .a-dur7 { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } 12 | .a-dur8 { -webkit-animation-duration: 2s; animation-duration: 2s; } 13 | .a-dur9 { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } 14 | .a-dur10 { -webkit-animation-duration: 4s; animation-duration: 4s; } 15 | .a-dur11 { -webkit-animation-duration: 8s; animation-duration: 8s; } 16 | .a-dur12 { -webkit-animation-duration: 12s; animation-duration: 12s; } 17 | @media screen and (min-width: 48em) { 18 | .a-dur0-ns { -webkit-animation-duration: 0; animation-duration: 0; } 19 | .a-dur1-ns { -webkit-animation-duration: .1s; animation-duration: .1s; } 20 | .a-dur2-ns { -webkit-animation-duration: .2s; animation-duration: .2s; } 21 | .a-dur3-ns { -webkit-animation-duration: .4s; animation-duration: .4s; } 22 | .a-dur4-ns { -webkit-animation-duration: .5s; animation-duration: .5s; } 23 | .a-dur5-ns { -webkit-animation-duration: .7s; animation-duration: .7s; } 24 | .a-dur6-ns { -webkit-animation-duration: 1s; animation-duration: 1s; } 25 | .a-dur7-ns { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } 26 | .a-dur8-ns { -webkit-animation-duration: 2s; animation-duration: 2s; } 27 | .a-dur9-ns { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } 28 | .a-dur10-ns { -webkit-animation-duration: 4s; animation-duration: 4s; } 29 | .a-dur11-ns { -webkit-animation-duration: 8s; animation-duration: 8s; } 30 | .a-dur12-ns { -webkit-animation-duration: 12s; animation-duration: 12s; } 31 | } 32 | @media screen and (min-width:48em) and (max-width: 64em) { 33 | .a-dur0-m { -webkit-animation-duration: 0; animation-duration: 0; } 34 | .a-dur1-m { -webkit-animation-duration: .1s; animation-duration: .1s; } 35 | .a-dur2-m { -webkit-animation-duration: .2s; animation-duration: .2s; } 36 | .a-dur3-m { -webkit-animation-duration: .4s; animation-duration: .4s; } 37 | .a-dur4-m { -webkit-animation-duration: .5s; animation-duration: .5s; } 38 | .a-dur5-m { -webkit-animation-duration: .7s; animation-duration: .7s; } 39 | .a-dur6-m { -webkit-animation-duration: 1s; animation-duration: 1s; } 40 | .a-dur7-m { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } 41 | .a-dur8-m { -webkit-animation-duration: 2s; animation-duration: 2s; } 42 | .a-dur9-m { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } 43 | .a-dur10-m { -webkit-animation-duration: 4s; animation-duration: 4s; } 44 | .a-dur11-m { -webkit-animation-duration: 8s; animation-duration: 8s; } 45 | .a-dur12-m { -webkit-animation-duration: 12s; animation-duration: 12s; } 46 | } 47 | @media screen and (min-width: 64em) { 48 | .a-dur0-l { -webkit-animation-duration: 0; animation-duration: 0; } 49 | .a-dur1-l { -webkit-animation-duration: .1s; animation-duration: .1s; } 50 | .a-dur2-l { -webkit-animation-duration: .2s; animation-duration: .2s; } 51 | .a-dur3-l { -webkit-animation-duration: .4s; animation-duration: .4s; } 52 | .a-dur4-l { -webkit-animation-duration: .5s; animation-duration: .5s; } 53 | .a-dur5-l { -webkit-animation-duration: .7s; animation-duration: .7s; } 54 | .a-dur6-l { -webkit-animation-duration: 1s; animation-duration: 1s; } 55 | .a-dur7-l { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } 56 | .a-dur8-l { -webkit-animation-duration: 2s; animation-duration: 2s; } 57 | .a-dur9-l { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } 58 | .a-dur10-l { -webkit-animation-duration: 4s; animation-duration: 4s; } 59 | .a-dur11-l { -webkit-animation-duration: 8s; animation-duration: 8s; } 60 | .a-dur12-l { -webkit-animation-duration: 12s; animation-duration: 12s; } 61 | } 62 | 63 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # css-animation-duration 1.0.8 2 | 3 | Css module of single purpose classes for animation duration 4 | 5 | #### Stats 6 | 7 | 411 | 52 | 104 8 | ---|---|--- 9 | bytes | selectors | declarations 10 | 11 | ## Installation 12 | 13 | #### With [npm](https://npmjs.com) 14 | 15 | ``` 16 | npm install --save-dev css-animation-duration 17 | ``` 18 | 19 | Learn more about using css installed with npm: 20 | * https://webpack.github.io/docs/stylesheets.html 21 | * https://github.com/defunctzombie/npm-css 22 | 23 | #### With Git 24 | 25 | http: 26 | ``` 27 | git clone https://github.com/tachyons-css/css-animation-duration 28 | ``` 29 | 30 | ssh: 31 | ``` 32 | git clone git@github.com:tachyons-css/css-animation-duration.git 33 | ``` 34 | 35 | ## Usage 36 | 37 | #### Using with [Postcss](https://github.com/postcss/postcss) 38 | 39 | Import the css module 40 | 41 | ```css 42 | @import "css-animation-duration"; 43 | ``` 44 | 45 | Then process the css using the [`tachyons-cli`](https://github.com/tachyons-css/tachyons-cli) 46 | 47 | ```sh 48 | $ npm i -g tachyons-cli 49 | $ tachyons path/to/css-file.css > dist/t.css 50 | ``` 51 | 52 | #### Using the css 53 | 54 | ##### CDN 55 | The easiest and most simple way to use the css is to use the cdn hosted version. Include it in the head of your html with: 56 | 57 | ``` 58 | 59 | ``` 60 | 61 | ##### Locally 62 | The built css is located in the `css` directory. It contains an unminified and minified version. 63 | You can either cut and paste that css or link to it directly in your html. 64 | 65 | ```html 66 | 67 | ``` 68 | 69 | #### Development 70 | 71 | The source css files can be found in the `src` directory. 72 | Running `$ npm start` will process the source css and place the built css in the `css` directory. 73 | 74 | ## The css 75 | 76 | ```css 77 | /* 78 | ANIMATION DURATION 79 | */ 80 | .a-dur0 { -webkit-animation-duration: 0; animation-duration: 0; } 81 | .a-dur1 { -webkit-animation-duration: .1s; animation-duration: .1s; } 82 | .a-dur2 { -webkit-animation-duration: .2s; animation-duration: .2s; } 83 | .a-dur3 { -webkit-animation-duration: .4s; animation-duration: .4s; } 84 | .a-dur4 { -webkit-animation-duration: .5s; animation-duration: .5s; } 85 | .a-dur5 { -webkit-animation-duration: .7s; animation-duration: .7s; } 86 | .a-dur6 { -webkit-animation-duration: 1s; animation-duration: 1s; } 87 | .a-dur7 { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } 88 | .a-dur8 { -webkit-animation-duration: 2s; animation-duration: 2s; } 89 | .a-dur9 { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } 90 | .a-dur10 { -webkit-animation-duration: 4s; animation-duration: 4s; } 91 | .a-dur11 { -webkit-animation-duration: 8s; animation-duration: 8s; } 92 | .a-dur12 { -webkit-animation-duration: 12s; animation-duration: 12s; } 93 | @media screen and (min-width: 48em) { 94 | .a-dur0-ns { -webkit-animation-duration: 0; animation-duration: 0; } 95 | .a-dur1-ns { -webkit-animation-duration: .1s; animation-duration: .1s; } 96 | .a-dur2-ns { -webkit-animation-duration: .2s; animation-duration: .2s; } 97 | .a-dur3-ns { -webkit-animation-duration: .4s; animation-duration: .4s; } 98 | .a-dur4-ns { -webkit-animation-duration: .5s; animation-duration: .5s; } 99 | .a-dur5-ns { -webkit-animation-duration: .7s; animation-duration: .7s; } 100 | .a-dur6-ns { -webkit-animation-duration: 1s; animation-duration: 1s; } 101 | .a-dur7-ns { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } 102 | .a-dur8-ns { -webkit-animation-duration: 2s; animation-duration: 2s; } 103 | .a-dur9-ns { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } 104 | .a-dur10-ns { -webkit-animation-duration: 4s; animation-duration: 4s; } 105 | .a-dur11-ns { -webkit-animation-duration: 8s; animation-duration: 8s; } 106 | .a-dur12-ns { -webkit-animation-duration: 12s; animation-duration: 12s; } 107 | } 108 | @media screen and (min-width:48em) and (max-width: 64em) { 109 | .a-dur0-m { -webkit-animation-duration: 0; animation-duration: 0; } 110 | .a-dur1-m { -webkit-animation-duration: .1s; animation-duration: .1s; } 111 | .a-dur2-m { -webkit-animation-duration: .2s; animation-duration: .2s; } 112 | .a-dur3-m { -webkit-animation-duration: .4s; animation-duration: .4s; } 113 | .a-dur4-m { -webkit-animation-duration: .5s; animation-duration: .5s; } 114 | .a-dur5-m { -webkit-animation-duration: .7s; animation-duration: .7s; } 115 | .a-dur6-m { -webkit-animation-duration: 1s; animation-duration: 1s; } 116 | .a-dur7-m { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } 117 | .a-dur8-m { -webkit-animation-duration: 2s; animation-duration: 2s; } 118 | .a-dur9-m { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } 119 | .a-dur10-m { -webkit-animation-duration: 4s; animation-duration: 4s; } 120 | .a-dur11-m { -webkit-animation-duration: 8s; animation-duration: 8s; } 121 | .a-dur12-m { -webkit-animation-duration: 12s; animation-duration: 12s; } 122 | } 123 | @media screen and (min-width: 64em) { 124 | .a-dur0-l { -webkit-animation-duration: 0; animation-duration: 0; } 125 | .a-dur1-l { -webkit-animation-duration: .1s; animation-duration: .1s; } 126 | .a-dur2-l { -webkit-animation-duration: .2s; animation-duration: .2s; } 127 | .a-dur3-l { -webkit-animation-duration: .4s; animation-duration: .4s; } 128 | .a-dur4-l { -webkit-animation-duration: .5s; animation-duration: .5s; } 129 | .a-dur5-l { -webkit-animation-duration: .7s; animation-duration: .7s; } 130 | .a-dur6-l { -webkit-animation-duration: 1s; animation-duration: 1s; } 131 | .a-dur7-l { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } 132 | .a-dur8-l { -webkit-animation-duration: 2s; animation-duration: 2s; } 133 | .a-dur9-l { -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } 134 | .a-dur10-l { -webkit-animation-duration: 4s; animation-duration: 4s; } 135 | .a-dur11-l { -webkit-animation-duration: 8s; animation-duration: 8s; } 136 | .a-dur12-l { -webkit-animation-duration: 12s; animation-duration: 12s; } 137 | } 138 | ``` 139 | 140 | ## Contributing 141 | 142 | 1. Fork it 143 | 2. Create your feature branch (`git checkout -b my-new-feature`) 144 | 3. Commit your changes (`git commit -am 'Add some feature'`) 145 | 4. Push to the branch (`git push origin my-new-feature`) 146 | 5. Create new Pull Request 147 | 148 | ## Authors 149 | 150 | * [mrmrs](http://mrmrs.io) 151 | * [johno](http://johnotander.com) 152 | 153 | ## License 154 | 155 | ISC 156 | 157 | --------------------------------------------------------------------------------