├── .gitignore ├── lib ├── play-state.css ├── iteration-count.css ├── direction.css ├── fill-mode.css ├── blur.css ├── fade.css ├── zoom.css ├── delay.css ├── pop.css ├── flash.css ├── duration.css ├── highlight-pop.css ├── timing-function.css ├── flicker.css ├── highlight.css └── translate.css ├── bower.json ├── docs ├── index.css ├── build.js ├── demo.js ├── base.css └── template.html ├── scripts └── s3.js ├── package.json ├── index.css ├── README.md ├── css ├── vhs.min.css └── vhs.css └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | aws.json 3 | -------------------------------------------------------------------------------- /lib/play-state.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-paused { animation-play-state: paused } 3 | 4 | -------------------------------------------------------------------------------- /lib/iteration-count.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-infinite { animation-iteration-count: infinite } 3 | 4 | -------------------------------------------------------------------------------- /lib/direction.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-reverse { animation-direction: reverse } 3 | .vhs-alternate { animation-direction: alternate } 4 | 5 | -------------------------------------------------------------------------------- /lib/fill-mode.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-fill-forwards { animation-fill-mode: forwards } 3 | .vhs-fill-backwards { animation-fill-mode: backwards } 4 | .vhs-fill-both { animation-fill-mode: both } 5 | 6 | -------------------------------------------------------------------------------- /lib/blur.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-blur { 3 | animation-name: vhs-blur; 4 | animation-duration: var(--blur-duration); 5 | animation-fill-mode: forwards; 6 | } 7 | 8 | @keyframes vhs-blur { 9 | from { filter: blur(32px) } 10 | to { filter: blur(0) } 11 | } 12 | -------------------------------------------------------------------------------- /lib/fade.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-fade { 3 | opacity: 0; 4 | animation-name: vhs-fade; 5 | animation-duration: var(--fade-duration); 6 | animation-fill-mode: forwards; 7 | } 8 | 9 | @keyframes vhs-fade { 10 | 0% { opacity: 0 } 11 | 100% { opacity: 1 } 12 | } 13 | 14 | -------------------------------------------------------------------------------- /lib/zoom.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-zoom { 3 | transform: scale(0); 4 | animation-name: vhs-zoom; 5 | animation-duration: var(--zoom-duration); 6 | animation-fill-mode: forwards; 7 | } 8 | 9 | @keyframes vhs-zoom { 10 | 0% { transform: scale(0) } 11 | 100% { transform: scale(1) } 12 | } 13 | 14 | -------------------------------------------------------------------------------- /lib/delay.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-delay-1 { animation-delay: var(--delay-1) } 3 | .vhs-delay-2 { animation-delay: var(--delay-2) } 4 | .vhs-delay-3 { animation-delay: var(--delay-3) } 5 | .vhs-delay-4 { animation-delay: var(--delay-4) } 6 | .vhs-delay-5 { animation-delay: var(--delay-5) } 7 | .vhs-delay-6 { animation-delay: var(--delay-6) } 8 | 9 | -------------------------------------------------------------------------------- /lib/pop.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-pop { 3 | transform: scale(0); 4 | animation-name: vhs-pop; 5 | animation-duration: var(--pop-duration); 6 | animation-fill-mode: forwards; 7 | } 8 | 9 | @keyframes vhs-pop { 10 | 0% { transform: scale(0) } 11 | 75% { transform: scale(1.25) } 12 | 100% { transform: scale(1) } 13 | } 14 | 15 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vhs", 3 | "version": "0.1.0", 4 | "homepage": "https://github.com/jxnblk/vhs", 5 | "authors": [ 6 | "Brent Jackson " 7 | ], 8 | "license": "MIT", 9 | "ignore": [ 10 | "**/.*", 11 | "node_modules", 12 | "bower_components", 13 | "test", 14 | "tests" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /lib/flash.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-flash { 3 | animation-name: vhs-flash; 4 | animation-duration: var(--flash-duration) ; /* previously .025s; */ 5 | animation-iteration-count: infinite; 6 | animation-timing-function: steps(1); 7 | opacity: 0; 8 | } 9 | 10 | @keyframes vhs-flash { 11 | 0% { opacity: 0 } 12 | 50% { opacity: 1 } 13 | } 14 | 15 | -------------------------------------------------------------------------------- /lib/duration.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-duration-1 { animation-duration: var(--duration-1) } 3 | .vhs-duration-2 { animation-duration: var(--duration-2) } 4 | .vhs-duration-3 { animation-duration: var(--duration-3) } 5 | .vhs-duration-4 { animation-duration: var(--duration-4) } 6 | .vhs-duration-5 { animation-duration: var(--duration-5) } 7 | .vhs-duration-6 { animation-duration: var(--duration-6) } 8 | 9 | -------------------------------------------------------------------------------- /lib/highlight-pop.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-highlight-pop { 3 | transform: scale(0); 4 | animation-name: vhs-pop, vhs-highlight; 5 | animation-duration: var(--pop-duration), var(--highlight-duration); 6 | animation-fill-mode: forwards; 7 | } 8 | 9 | .vhs-highlight-pop-text { 10 | animation-name: vhs-pop, vhs-highlight-text; 11 | animation-duration: var(--pop-duration), var(--highlight-duration); 12 | } 13 | 14 | -------------------------------------------------------------------------------- /lib/timing-function.css: -------------------------------------------------------------------------------- 1 | 2 | /* Initial Value */ 3 | /* .vhs-ease { animation-timing-function: ease } */ 4 | 5 | .vhs-linear { animation-timing-function: linear } 6 | .vhs-ease-in { animation-timing-function: ease-in } 7 | .vhs-ease-out { animation-timing-function: ease-out } 8 | .vhs-ease-in-out { animation-timing-function: ease-in-out } 9 | 10 | /* Reference */ 11 | /* cubic-bezier(0.1, 0.7, 1.0, 0.1) */ 12 | /* Steps */ 13 | 14 | -------------------------------------------------------------------------------- /lib/flicker.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-flicker { 3 | opacity: 0; 4 | animation-name: vhs-flicker; 5 | animation-duration: var(--flicker-duration); 6 | animation-fill-mode: forwards; 7 | animation-timing-function: steps(7); 8 | } 9 | 10 | @keyframes vhs-flicker { 11 | 0% { opacity: 0 } 12 | 12.5% { opacity: .25 } 13 | 25% { opacity: 0 } 14 | 37.5% { opacity: 0 } 15 | 50% { opacity: .75 } 16 | 62.5% { opacity: 0 } 17 | 75% { opacity: 1 } 18 | 87.5% { opacity: .5 } 19 | 100% { opacity: 1 } 20 | } 21 | 22 | -------------------------------------------------------------------------------- /docs/index.css: -------------------------------------------------------------------------------- 1 | 2 | @import 'basscss-highlight-dark'; 3 | 4 | .prose table { 5 | table-layout: fixed; 6 | } 7 | 8 | .prose th { border-bottom: 2px solid rgba(0,0,0,.125) } 9 | .prose td { border-bottom: 1px solid rgba(0,0,0,.125) } 10 | 11 | .prose th:first-child, 12 | .prose td:first-child { 13 | padding-left: 0; 14 | } 15 | .prose th:last-child, 16 | .prose td:last-child { 17 | padding-right: 0; 18 | } 19 | 20 | .dark h1 a, 21 | .dark h2 a, 22 | .dark h3 a, 23 | .dark h4 a, 24 | .dark h5 a, 25 | .dark h6 a { 26 | color: white; 27 | } 28 | -------------------------------------------------------------------------------- /lib/highlight.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-highlight { 3 | animation-name: vhs-highlight; 4 | animation-duration: var(--highlight-duration); 5 | animation-fill-mode: forwards; 6 | } 7 | 8 | .vhs-highlight-text { 9 | animation-name: vhs-highlight-text; 10 | animation-duration: var(--highlight-duration); 11 | } 12 | 13 | @keyframes vhs-highlight { 14 | 0% { background-color: color(var(--aqua, aqua) alpha(50%)) } 15 | 100% { background-color: color(var(--aqua, aqua) alpha(0%)) } 16 | } 17 | 18 | @keyframes vhs-highlight-text { 19 | 0% { color: var(--blue, blue) } 20 | 100% { color: inherit } 21 | } 22 | 23 | -------------------------------------------------------------------------------- /docs/build.js: -------------------------------------------------------------------------------- 1 | 2 | var fs = require('fs'); 3 | var path = require('path'); 4 | var doctor = require('doctor-mark'); 5 | var stats = require('cssstats'); 6 | var humanize = require('humanize-plus'); 7 | var data = require('../package.json'); 8 | 9 | var readme = fs.readFileSync(path.join(__dirname, '../README.md'), 'utf8'); 10 | var css = fs.readFileSync(path.join(__dirname, '../css/vhs.css'), 'utf8'); 11 | 12 | data.template = fs.readFileSync(path.join(__dirname, './template.html'), 'utf8'); 13 | data.stylesheets = [ 14 | 'http://d2v52k3cl9vedd.cloudfront.net/bassdock/1.2.1/bassdock.min.css', 15 | 'css/vhs.css', 16 | 'docs/base.css' 17 | ]; 18 | data.javascripts = [ 19 | 'docs/demo.js' 20 | ]; 21 | data.base_url = ''; 22 | data.title = 'VHS'; 23 | 24 | data.stats = stats(css); 25 | data.stats.sizeKB = humanize.fileSize(data.stats.size); 26 | data.stats.gzipSizeKB = humanize.fileSize(data.stats.gzipSize); 27 | 28 | var html = doctor(readme, data).html(); 29 | 30 | fs.writeFileSync(path.join(__dirname, '../index.html'), html); 31 | 32 | -------------------------------------------------------------------------------- /scripts/s3.js: -------------------------------------------------------------------------------- 1 | 2 | var path = require('path'); 3 | var s3 = require('s3'); 4 | var version = require('../package.json').version; 5 | 6 | function upload() { 7 | var options = require('../aws.json'); 8 | var params = { 9 | localFile: path.join(__dirname, '../css/vhs.min.css'), 10 | s3Params: { 11 | Bucket: options.bucket, 12 | Key: 'vhs/' + version + '/vhs.min.css', 13 | ACL: 'public-read', 14 | } 15 | }; 16 | 17 | var client = s3.createClient({ 18 | s3Options: { 19 | accessKeyId: options.key, 20 | secretAccessKey: options.secret, 21 | } 22 | }); 23 | 24 | var uploader = client.uploadFile(params); 25 | uploader.on('error', function(err) { 26 | console.error("unable to upload:", err.stack); 27 | }); 28 | uploader.on('progress', function() { 29 | console.log("progress", uploader.progressMd5Amount, uploader.progressAmount, uploader.progressTotal); 30 | }); 31 | uploader.on('end', function() { 32 | console.log("done uploading"); 33 | }); 34 | 35 | }; 36 | 37 | upload(); 38 | 39 | -------------------------------------------------------------------------------- /lib/translate.css: -------------------------------------------------------------------------------- 1 | 2 | .vhs-left, 3 | .vhs-right, 4 | .vhs-top, 5 | .vhs-bottom { 6 | opacity: 0; 7 | animation-duration: var(--translate-duration); 8 | animation-fill-mode: forwards; 9 | } 10 | 11 | .vhs-left { 12 | animation-name: vhs-left; 13 | transform: translateX(-var(--translate-x-distance)); 14 | } 15 | .vhs-right { 16 | animation-name: vhs-right; 17 | transform: translateX(var(--translate-x-distance)); 18 | } 19 | .vhs-top { 20 | animation-name: vhs-top; 21 | transform: translateY(-var(--translate-y-distance)); 22 | } 23 | .vhs-bottom { 24 | animation-name: vhs-bottom; 25 | transform: translateY(var(--translate-y-distance)); 26 | } 27 | 28 | @keyframes vhs-left { 29 | 0% { transform: translateX(-var(--translate-x-distance)); opacity: 0; } 30 | 100% { transform: translateX(0); opacity: 1; } 31 | } 32 | 33 | @keyframes vhs-right { 34 | 0% { transform: translateX(var(--translate-x-distance)); opacity: 0; } 35 | 100% { transform: translateX(0); opacity: 1; } 36 | } 37 | 38 | @keyframes vhs-top { 39 | 0% { transform: translateY(-var(--translate-y-distance)); opacity: 0; } 40 | 100% { transform: translateY(0); opacity: 1; } 41 | } 42 | 43 | @keyframes vhs-bottom { 44 | 0% { transform: translateY(var(--translate-y-distance)); opacity: 0; } 45 | 100% { transform: translateY(0); opacity: 1; } 46 | } 47 | 48 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vhs", 3 | "version": "0.2.0", 4 | "description": "Post-future CSS animations", 5 | "style": "index.css", 6 | "scripts": { 7 | "css": "cssnext index.css css/vhs.css", 8 | "minify": "cssnext index.css css/vhs.min.css -c", 9 | "docs:css": "cssnext docs/index.css docs/base.css", 10 | "html": "node docs/build", 11 | "watch:css": "cssnext index.css css/vhs.css --watch", 12 | "s3": "npm run minify && node scripts/s3", 13 | "serve": "http-server -p 8000", 14 | "start": "npm run watch:css & npm run docs:css & npm run html & npm run serve" 15 | }, 16 | "repository": { 17 | "type": "git", 18 | "url": "https://github.com/jxnblk/vhs.git" 19 | }, 20 | "keywords": [ 21 | "CSS", 22 | "OOCSS", 23 | "Basscss" 24 | ], 25 | "author": "Brent Jackson", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/jxnblk/vhs/issues" 29 | }, 30 | "homepage": "https://github.com/jxnblk/vhs", 31 | "devDependencies": { 32 | "cssnext": "^1.1.0", 33 | "cssstats": "^1.2.1", 34 | "doctor-mark": "^1.0.0", 35 | "http-server": "^0.8.0", 36 | "humanize-plus": "^1.5.0", 37 | "mocha": "^2.2.1", 38 | "postcss": "^4.0.6", 39 | "s3": "^4.4.0", 40 | "watch": "^0.14.0" 41 | }, 42 | "dependencies": { 43 | "colors.css": "^2.3.0" 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /docs/demo.js: -------------------------------------------------------------------------------- 1 | 2 | var demos = document.querySelectorAll('.js-demo'); 3 | var replayButton = document.querySelector('.js-replay-button'); 4 | var pauseButton = document.querySelector('.js-pause-button'); 5 | var loopButton = document.querySelector('.js-loop-button'); 6 | 7 | var paused = false; 8 | var looping = false; 9 | 10 | function hideShow(el) { 11 | var height = el.offsetHeight; 12 | var className = el.className; 13 | console.log(height); 14 | el.style.minHeight = height + 'px'; 15 | el.className = ''; 16 | el.timeout = window.setTimeout(function() { 17 | el.className = className; 18 | window.clearTimeout(el.timeout); 19 | }, 10); 20 | } 21 | 22 | function replay() { 23 | for (var i = 0; i < demos.length; i++) { 24 | hideShow(demos[i]); 25 | } 26 | } 27 | 28 | function toggleLoop() { 29 | looping = !looping; 30 | for (var i = 0; i < demos.length; i++) { 31 | var el = demos[i]; 32 | looping ? el.classList.add('vhs-infinite') : el.classList.remove('vhs-infinite'); 33 | looping ? loopButton.innerText = 'Stop' : loopButton.innerText = 'Loop'; 34 | } 35 | } 36 | 37 | function togglePause() { 38 | paused = !paused; 39 | for (var i = 0; i < demos.length; i++) { 40 | var el = demos[i]; 41 | paused ? el.classList.add('vhs-paused') : el.classList.remove('vhs-paused'); 42 | paused ? pauseButton.innerText = 'Play' : pauseButton.innerText = 'Pause'; 43 | } 44 | } 45 | 46 | replayButton.addEventListener('click', replay); 47 | loopButton.addEventListener('click', toggleLoop); 48 | pauseButton.addEventListener('click', togglePause); 49 | 50 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | /* 2 | VHS 3 | Post-future CSS animations 4 | 5 | */ 6 | 7 | @import './lib/flash'; 8 | @import './lib/flicker'; 9 | @import './lib/zoom'; 10 | @import './lib/fade'; 11 | @import './lib/pop'; 12 | @import './lib/highlight'; 13 | @import './lib/translate'; 14 | @import './lib/blur'; 15 | 16 | @import './lib/highlight-pop'; 17 | 18 | @import './lib/delay'; 19 | @import './lib/duration'; 20 | @import './lib/timing-function'; 21 | @import './lib/iteration-count'; 22 | @import './lib/direction'; 23 | @import './lib/fill-mode'; 24 | @import './lib/play-state'; 25 | 26 | 27 | @import 'colors.css/myth/variables'; 28 | 29 | :root { 30 | 31 | --time-1: .1s; 32 | --time-2: .2s; 33 | --time-3: .4s; 34 | --time-4: .6s; 35 | --time-5: 1s; 36 | --time-6: 2s; 37 | 38 | --delay-default: 0; 39 | --delay-1: var(--time-1); 40 | --delay-2: var(--time-2); 41 | --delay-3: var(--time-3); 42 | --delay-4: var(--time-4); 43 | --delay-5: var(--time-5); 44 | --delay-6: var(--time-6); 45 | 46 | --duration-default: var(--time-2); 47 | --duration-1: var(--time-1); 48 | --duration-2: var(--time-2); 49 | --duration-3: var(--time-3); 50 | --duration-4: var(--time-4); 51 | --duration-5: var(--time-5); 52 | --duration-6: var(--time-6); 53 | 54 | --flicker-duration: var(--duration-3); 55 | 56 | --flash-duration: var(--duration-1); 57 | --pop-duration: var(--duration-2); 58 | --zoom-duration: var(--duration-2); 59 | --fade-duration: var(--duration-3); 60 | --highlight-duration: var(--duration-6); 61 | --blur-duration: var(--duration-5); 62 | 63 | --translate-duration: var(--duration-4); 64 | --translate-x-distance: 12.5vw; 65 | --translate-y-distance: 12.5vh; 66 | 67 | } 68 | 69 | -------------------------------------------------------------------------------- /docs/base.css: -------------------------------------------------------------------------------- 1 | 2 | /* Basscss Highlight */ 3 | 4 | /* 5 | 6 | COLOR VARIABLES 7 | 8 | - Cool 9 | - Warm 10 | - Gray Scale 11 | 12 | */ 13 | 14 | :root { 15 | 16 | /* Cool */ 17 | 18 | 19 | /* Warm */ 20 | 21 | 22 | /* Gray scale */ 23 | 24 | } 25 | 26 | .highlight-dark .hljs { 27 | color: white; 28 | -webkit-text-size-adjust: none; 29 | } 30 | 31 | .highlight-dark .hljs-comment, 32 | .highlight-dark .diff .hljs-header, 33 | .highlight-dark .hljs-javadoc { 34 | color: #ddd; 35 | font-style: italic; 36 | } 37 | 38 | .highlight-dark .hljs-keyword, 39 | .highlight-dark .css .rule .hljs-keyword, 40 | .highlight-dark .hljs-winutils, 41 | .highlight-dark .nginx .hljs-title, 42 | .highlight-dark .hljs-subst, 43 | .highlight-dark .hljs-request, 44 | .highlight-dark .hljs-status { 45 | color: white; 46 | font-weight: bold; 47 | } 48 | 49 | .highlight-dark .hljs-number, 50 | .highlight-dark .hljs-hexcolor, 51 | .highlight-dark .ruby .hljs-constant { 52 | color: #01ff70; 53 | } 54 | 55 | .highlight-dark .hljs-string, 56 | .highlight-dark .hljs-tag .hljs-value, 57 | .highlight-dark .hljs-phpdoc, 58 | .highlight-dark .hljs-dartdoc, 59 | .highlight-dark .tex .hljs-formula { 60 | color: #ff4136; 61 | } 62 | 63 | .hljs-title, 64 | .hljs-id, 65 | .scss .hljs-preprocessor { 66 | color: #ff4136; 67 | font-weight: bold; 68 | } 69 | 70 | .highlight-dark .hljs-list .hljs-keyword, 71 | .highlight-dark .hljs-subst { 72 | font-weight: normal; 73 | } 74 | 75 | .highlight-dark .hljs-class .hljs-title, 76 | .highlight-dark .hljs-type, 77 | .highlight-dark .vhdl .hljs-literal, 78 | .highlight-dark .tex .hljs-command { 79 | color: #7fdbff; 80 | font-weight: bold; 81 | } 82 | 83 | .highlight-dark .hljs-tag, 84 | .highlight-dark .hljs-tag .hljs-title, 85 | .highlight-dark .hljs-rules .hljs-property, 86 | .highlight-dark .django .hljs-tag .hljs-keyword { 87 | color: #7fdbff; 88 | font-weight: normal; 89 | } 90 | 91 | .highlight-dark .hljs-attribute, 92 | .highlight-dark .hljs-variable, 93 | .highlight-dark .lisp .hljs-body { 94 | color: #01ff70; 95 | } 96 | 97 | .highlight-dark .hljs-regexp { 98 | color: #01ff70; 99 | } 100 | 101 | .highlight-dark .hljs-symbol, 102 | .highlight-dark .ruby .hljs-symbol .hljs-string, 103 | .highlight-dark .lisp .hljs-keyword, 104 | .highlight-dark .clojure .hljs-keyword, 105 | .highlight-dark .scheme .hljs-keyword, 106 | .highlight-dark .tex .hljs-special, 107 | .highlight-dark .hljs-prompt { 108 | color: #f012be; 109 | } 110 | 111 | .highlight-dark .hljs-built_in { 112 | color: #7fdbff; 113 | } 114 | 115 | .highlight-dark .hljs-preprocessor, 116 | .highlight-dark .hljs-pragma, 117 | .highlight-dark .hljs-pi, 118 | .highlight-dark .hljs-doctype, 119 | .highlight-dark .hljs-shebang, 120 | .highlight-dark .hljs-cdata { 121 | color: #ddd; 122 | font-weight: bold; 123 | } 124 | 125 | .highlight-dark .hljs-deletion { 126 | background: #f012be; 127 | } 128 | 129 | .highlight-dark .hljs-addition { 130 | background: #01ff70; 131 | } 132 | 133 | .highlight-dark .diff .hljs-change { 134 | background: #7fdbff; 135 | } 136 | 137 | .highlight-dark .hljs-chunk { 138 | color: #aaa; 139 | } 140 | 141 | 142 | :root { 143 | 144 | /* Mapped colors */ 145 | 146 | } 147 | 148 | .prose table { 149 | table-layout: fixed; 150 | } 151 | 152 | .prose th { border-bottom: 2px solid rgba(0,0,0,.125) } 153 | .prose td { border-bottom: 1px solid rgba(0,0,0,.125) } 154 | 155 | .prose th:first-child, 156 | .prose td:first-child { 157 | padding-left: 0; 158 | } 159 | .prose th:last-child, 160 | .prose td:last-child { 161 | padding-right: 0; 162 | } 163 | 164 | .dark h1 a, 165 | .dark h2 a, 166 | .dark h3 a, 167 | .dark h4 a, 168 | .dark h5 a, 169 | .dark h6 a { 170 | color: white; 171 | } 172 | -------------------------------------------------------------------------------- /docs/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | <%= obj.title %> 6 | 7 | 8 | 9 | <% if (obj.keywords.length) { %> 10 | 11 | <% } %> 12 | <% obj.stylesheets.map(function(stylesheet) { %> 13 | 14 | <% }) %> 15 | 16 | 17 | 18 |
19 | 20 |
21 |
22 |
23 |

<%= obj.name %>

24 |

<%= obj.description %>

25 |
26 |
27 | <% if (obj.homepage) { %> 28 | Github 29 | <% } %> 30 | <% if (obj.npm) { %> 31 | NPM 32 | <% } %> 33 |
34 |
35 |
36 |
<%= stats.sizeKB %>
37 |
<%= stats.gzipSizeKB %> gzipped
38 |
<%= stats.aggregates.selectors %> selectors
39 |
<%= stats.aggregates.declarations %> declarations
40 |
<%= stats.aggregates.properties.length %> properties
41 |
42 |
43 | 44 | 45 | 46 |
47 |
48 | 49 |
50 | 51 |
52 |
53 | <%= content %> 54 | 55 |
56 |
57 | 66 |
67 |
68 | 69 |
70 | 71 |
72 | Github 73 | Download 74 |
75 | 76 |
77 | 78 | 92 | 93 |
94 | 95 | <% obj.javascripts.map(function(script) { %> 96 | 97 | <% }) %> 98 | 99 | 100 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # VHS 2 | 3 | Post-future CSS animations 4 | 5 | ``` 6 | npm install vhs 7 | ``` 8 | 9 | Or use the [CDN](http://d2v52k3cl9vedd.cloudfront.net/vhs/0.1.0/vhs.min.css) 10 | 11 | ``` 12 | 13 | ``` 14 | 15 | ## Blur 16 | 17 | ```html 18 |
19 |
.vhs-blur
20 |
21 | ``` 22 | 23 | ## Blur Reverse 24 | 25 | ```html 26 |
27 |
.vhs-blur
28 |
29 | ``` 30 | 31 | ## Flicker 32 | 33 | ```html 34 |
35 |
.vhs-flicker
36 |
37 | ``` 38 | 39 | ## Flicker Reverse 40 | 41 | ```html 42 |
43 |
.vhs-flicker.vhs-reverse
44 |
45 | ``` 46 | 47 | ## Zoom 48 | 49 | ```html 50 |
51 |
.vhs-zoom
52 |
53 | ``` 54 | 55 | ## Zoom Reverse 56 | 57 | ```html 58 |
59 |
.vhs-zoom .vhs-reverse
60 |
61 | ``` 62 | 63 | ## Fade 64 | 65 | ```html 66 |
67 |
.vhs-fade
68 |
69 | ``` 70 | 71 | ## Fade Reverse 72 | 73 | ```html 74 |
75 |
.vhs-fade .vhs-reverse
76 |
77 | ``` 78 | 79 | ### Pulsate Effect 80 | 81 | ```html 82 |
83 |
.vhs-fade .vhs-duration-6 .vhs-infinite .vhs-alternate
84 |
85 | ``` 86 | 87 | ## Pop 88 | 89 | ```html 90 |
91 |
.vhs-pop
92 |
93 | ``` 94 | 95 | ## Pop Reverse 96 | 97 | ```html 98 |
99 |
.vhs-pop .vhs-reverse
100 |
101 | ``` 102 | 103 | ## Highlight 104 | 105 | ```html 106 |
107 |
.vhs-highlight
108 |
109 | ``` 110 | 111 | ## Highlight Text 112 | 113 | ```html 114 |
115 |
.vhs-highlight-text
116 |
117 | ``` 118 | 119 | ## Flash 120 | 121 | ```html 122 |
123 |
.vhs-flash
124 |
125 | ``` 126 | 127 | ```html 128 |
129 |
.vhs-flash .vhs-duration-2
130 |
.vhs-flash .vhs-duration-3
131 |
.vhs-flash .vhs-duration-4
132 |
.vhs-flash .vhs-duration-5
133 |
.vhs-flash vhs-duration-6
134 |
135 | ``` 136 | 137 | ## Left 138 | 139 | ```html 140 |
141 |
.vhs-left
142 |
143 | ``` 144 | 145 | ## Left Reverse 146 | 147 | ```html 148 |
149 |
.vhs-left .vhs-reverse
150 |
151 | ``` 152 | 153 | 154 | ## Right 155 | 156 | ```html 157 |
158 |
.vhs-right
159 |
160 | ``` 161 | 162 | ## Right Reverse 163 | 164 | ```html 165 |
166 |
.vhs-right .vhs-reverse
167 |
168 | ``` 169 | 170 | 171 | ## Top 172 | 173 | ```html 174 |
175 |
.vhs-top
176 |
177 | ``` 178 | 179 | ## Top Reverse 180 | 181 | ```html 182 |
183 |
.vhs-top .vhs-reverse
184 |
185 | ``` 186 | 187 | 188 | ## Bottom 189 | 190 | ```html 191 |
192 |
.vhs-bottom
193 |
194 | ``` 195 | 196 | ## Bottom Reverse 197 | 198 | ```html 199 |
200 |
.vhs-bottom .vhs-reverse
201 |
202 | ``` 203 | 204 | --- 205 | 206 | 207 | ## Highlight Pop 208 | 209 | ```html 210 |
211 |
.vhs-highlight-pop
212 |
213 | ``` 214 | 215 | 216 | ## Utility 217 | 218 | ### Delay 219 | 220 | class | description 221 | ---|--- 222 | .vhs-delay-1 | animation-delay: 1 223 | .vhs-delay-2 | animation-delay: 2 224 | .vhs-delay-3 | animation-delay: 3 225 | .vhs-delay-4 | animation-delay: 4 226 | .vhs-delay-5 | animation-delay: 5 227 | .vhs-delay-5 | animation-delay: 6 228 | 229 | ### Duration 230 | 231 | class | description 232 | ---|--- 233 | .vhs-duration-1 | animation-duration: 1 234 | .vhs-duration-2 | animation-duration: 2 235 | .vhs-duration-3 | animation-duration: 3 236 | .vhs-duration-4 | animation-duration: 4 237 | .vhs-duration-5 | animation-duration: 5 238 | .vhs-duration-6 | animation-duration: 6 239 | 240 | ### Timing Function 241 | 242 | class | description 243 | ---|--- 244 | .vhs-ease-in | animation-timing-function: ease-in 245 | .vhs-ease-out | animation-timing-function: ease-out 246 | .vhs-ease-in-out | animation-timing-function: ease-in-out 247 | .vhs-linear | animation-timing-function: linear 248 | 249 | ### Iteration Count 250 | 251 | class | description 252 | ---|--- 253 | .vhs-infinite | animation-iteration-count: infinite 254 | 255 | ### Direction 256 | 257 | class | description 258 | ---|--- 259 | .vhs-reverse | animation-direction: reverse 260 | .vhs-alternate | animation-direction: alternate 261 | 262 | ### Fill Mode 263 | 264 | class | description 265 | ---|--- 266 | .vhs-fill-forwards | animation-fill-mode: forwards 267 | .vhs-fill-backwards | animation-fill-mode: backwards 268 | .vhs-fill-both | animation-fill-mode: both 269 | 270 | ### Play State 271 | 272 | class | description 273 | ---|--- 274 | .vhs-paused | animation-play-state: paused 275 | 276 | -------------------------------------------------------------------------------- /css/vhs.min.css: -------------------------------------------------------------------------------- 1 | .vhs-flash{-webkit-animation-name:vhs-flash;animation-name:vhs-flash;-webkit-animation-duration:.1s;animation-duration:.1s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-timing-function:steps(1);animation-timing-function:steps(1);opacity:0}@-webkit-keyframes vhs-flash{0%{opacity:0}50%{opacity:1}}@keyframes vhs-flash{0%{opacity:0}50%{opacity:1}}.vhs-flicker{opacity:0;-webkit-animation-name:vhs-flicker;animation-name:vhs-flicker;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:steps(7);animation-timing-function:steps(7)}@-webkit-keyframes vhs-flicker{0%{opacity:0}12.5%{opacity:.25}25%{opacity:0}37.5%{opacity:0}50%{opacity:.75}62.5%{opacity:0}75%{opacity:1}87.5%{opacity:.5}100%{opacity:1}}@keyframes vhs-flicker{0%{opacity:0}12.5%{opacity:.25}25%{opacity:0}37.5%{opacity:0}50%{opacity:.75}62.5%{opacity:0}75%{opacity:1}87.5%{opacity:.5}100%{opacity:1}}.vhs-zoom{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation-name:vhs-zoom;animation-name:vhs-zoom;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes vhs-zoom{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes vhs-zoom{0%{-webkit-transform:scale(0);transform:scale(0)}100%{-webkit-transform:scale(1);transform:scale(1)}}.vhs-fade{opacity:0;-webkit-animation-name:vhs-fade;animation-name:vhs-fade;-webkit-animation-duration:.4s;animation-duration:.4s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes vhs-fade{0%{opacity:0}100%{opacity:1}}@keyframes vhs-fade{0%{opacity:0}100%{opacity:1}}.vhs-pop{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation-name:vhs-pop;animation-name:vhs-pop;-webkit-animation-duration:.2s;animation-duration:.2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes vhs-pop{0%{-webkit-transform:scale(0);transform:scale(0)}75%{-webkit-transform:scale(1.25);transform:scale(1.25)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes vhs-pop{0%{-webkit-transform:scale(0);transform:scale(0)}75%{-webkit-transform:scale(1.25);transform:scale(1.25)}100%{-webkit-transform:scale(1);transform:scale(1)}}.vhs-highlight{-webkit-animation-name:vhs-highlight;animation-name:vhs-highlight;-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.vhs-highlight-text{-webkit-animation-name:vhs-highlight-text;animation-name:vhs-highlight-text;-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes vhs-highlight{0%{background-color:rgba(0,255,255,.5);background-color:rgba(127,219,255,.5)}100%{background-color:rgba(0,255,255,0);background-color:rgba(127,219,255,0)}}@keyframes vhs-highlight{0%{background-color:rgba(0,255,255,.5);background-color:rgba(127,219,255,.5)}100%{background-color:rgba(0,255,255,0);background-color:rgba(127,219,255,0)}}@-webkit-keyframes vhs-highlight-text{0%{color:blue;color:#0074d9}100%{color:inherit}}@keyframes vhs-highlight-text{0%{color:blue;color:#0074d9}100%{color:inherit}}.vhs-left,.vhs-right,.vhs-top,.vhs-bottom{opacity:0;-webkit-animation-duration:.6s;animation-duration:.6s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.vhs-left{-webkit-animation-name:vhs-left;animation-name:vhs-left;-webkit-transform:translateX(-12.5vw);-ms-transform:translateX(-12.5vw);transform:translateX(-12.5vw)}.vhs-right{-webkit-animation-name:vhs-right;animation-name:vhs-right;-webkit-transform:translateX(12.5vw);-ms-transform:translateX(12.5vw);transform:translateX(12.5vw)}.vhs-top{-webkit-animation-name:vhs-top;animation-name:vhs-top;-webkit-transform:translateY(-12.5vh);-ms-transform:translateY(-12.5vh);transform:translateY(-12.5vh)}.vhs-bottom{-webkit-animation-name:vhs-bottom;animation-name:vhs-bottom;-webkit-transform:translateY(12.5vh);-ms-transform:translateY(12.5vh);transform:translateY(12.5vh)}@-webkit-keyframes vhs-left{0%{-webkit-transform:translateX(-12.5vw);transform:translateX(-12.5vw);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes vhs-left{0%{-webkit-transform:translateX(-12.5vw);transform:translateX(-12.5vw);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes vhs-right{0%{-webkit-transform:translateX(12.5vw);transform:translateX(12.5vw);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes vhs-right{0%{-webkit-transform:translateX(12.5vw);transform:translateX(12.5vw);opacity:0}100%{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes vhs-top{0%{-webkit-transform:translateY(-12.5vh);transform:translateY(-12.5vh);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes vhs-top{0%{-webkit-transform:translateY(-12.5vh);transform:translateY(-12.5vh);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@-webkit-keyframes vhs-bottom{0%{-webkit-transform:translateY(12.5vh);transform:translateY(12.5vh);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}@keyframes vhs-bottom{0%{-webkit-transform:translateY(12.5vh);transform:translateY(12.5vh);opacity:0}100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}}.vhs-highlight-pop{-webkit-transform:scale(0);-ms-transform:scale(0);transform:scale(0);-webkit-animation-name:vhs-pop,vhs-highlight;animation-name:vhs-pop,vhs-highlight;-webkit-animation-duration:.2s,2s;animation-duration:.2s,2s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.vhs-highlight-pop-text{-webkit-animation-name:vhs-pop,vhs-highlight-text;animation-name:vhs-pop,vhs-highlight-text;-webkit-animation-duration:.2s,2s;animation-duration:.2s,2s}.vhs-delay-1{-webkit-animation-delay:.1s;animation-delay:.1s}.vhs-delay-2{-webkit-animation-delay:.2s;animation-delay:.2s}.vhs-delay-3{-webkit-animation-delay:.4s;animation-delay:.4s}.vhs-delay-4{-webkit-animation-delay:.6s;animation-delay:.6s}.vhs-delay-5{-webkit-animation-delay:1s;animation-delay:1s}.vhs-delay-6{-webkit-animation-delay:2s;animation-delay:2s}.vhs-duration-1{-webkit-animation-duration:.1s;animation-duration:.1s}.vhs-duration-2{-webkit-animation-duration:.2s;animation-duration:.2s}.vhs-duration-3{-webkit-animation-duration:.4s;animation-duration:.4s}.vhs-duration-4{-webkit-animation-duration:.6s;animation-duration:.6s}.vhs-duration-5{-webkit-animation-duration:1s;animation-duration:1s}.vhs-duration-6{-webkit-animation-duration:2s;animation-duration:2s}.vhs-linear{-webkit-animation-timing-function:linear;animation-timing-function:linear}.vhs-ease-in{-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}.vhs-ease-out{-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}.vhs-ease-in-out{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}.vhs-infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.vhs-reverse{-webkit-animation-direction:reverse;animation-direction:reverse}.vhs-alternate{-webkit-animation-direction:alternate;animation-direction:alternate}.vhs-fill-forwards{-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.vhs-fill-backwards{-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.vhs-fill-both{-webkit-animation-fill-mode:both;animation-fill-mode:both}.vhs-paused{-webkit-animation-play-state:paused;animation-play-state:paused} -------------------------------------------------------------------------------- /css/vhs.css: -------------------------------------------------------------------------------- 1 | /* 2 | VHS 3 | Post-future CSS animations 4 | 5 | */ 6 | 7 | .vhs-flash { 8 | -webkit-animation-name: vhs-flash; 9 | animation-name: vhs-flash; 10 | -webkit-animation-duration: .1s ; 11 | animation-duration: .1s ; /* previously .025s; */ 12 | -webkit-animation-iteration-count: infinite; 13 | animation-iteration-count: infinite; 14 | -webkit-animation-timing-function: steps(1); 15 | animation-timing-function: steps(1); 16 | opacity: 0; 17 | } 18 | 19 | @-webkit-keyframes vhs-flash { 20 | 0% { opacity: 0 } 21 | 50% { opacity: 1 } 22 | } 23 | 24 | @keyframes vhs-flash { 25 | 0% { opacity: 0 } 26 | 50% { opacity: 1 } 27 | } 28 | .vhs-flicker { 29 | opacity: 0; 30 | -webkit-animation-name: vhs-flicker; 31 | animation-name: vhs-flicker; 32 | -webkit-animation-duration: .4s; 33 | animation-duration: .4s; 34 | -webkit-animation-fill-mode: forwards; 35 | animation-fill-mode: forwards; 36 | -webkit-animation-timing-function: steps(7); 37 | animation-timing-function: steps(7); 38 | } 39 | 40 | @-webkit-keyframes vhs-flicker { 41 | 0% { opacity: 0 } 42 | 12.5% { opacity: .25 } 43 | 25% { opacity: 0 } 44 | 37.5% { opacity: 0 } 45 | 50% { opacity: .75 } 46 | 62.5% { opacity: 0 } 47 | 75% { opacity: 1 } 48 | 87.5% { opacity: .5 } 49 | 100% { opacity: 1 } 50 | } 51 | 52 | @keyframes vhs-flicker { 53 | 0% { opacity: 0 } 54 | 12.5% { opacity: .25 } 55 | 25% { opacity: 0 } 56 | 37.5% { opacity: 0 } 57 | 50% { opacity: .75 } 58 | 62.5% { opacity: 0 } 59 | 75% { opacity: 1 } 60 | 87.5% { opacity: .5 } 61 | 100% { opacity: 1 } 62 | } 63 | .vhs-zoom { 64 | -webkit-transform: scale(0); 65 | -ms-transform: scale(0); 66 | transform: scale(0); 67 | -webkit-animation-name: vhs-zoom; 68 | animation-name: vhs-zoom; 69 | -webkit-animation-duration: .2s; 70 | animation-duration: .2s; 71 | -webkit-animation-fill-mode: forwards; 72 | animation-fill-mode: forwards; 73 | } 74 | 75 | @-webkit-keyframes vhs-zoom { 76 | 0% { -webkit-transform: scale(0); transform: scale(0) } 77 | 100% { -webkit-transform: scale(1); transform: scale(1) } 78 | } 79 | 80 | @keyframes vhs-zoom { 81 | 0% { -webkit-transform: scale(0); transform: scale(0) } 82 | 100% { -webkit-transform: scale(1); transform: scale(1) } 83 | } 84 | .vhs-fade { 85 | opacity: 0; 86 | -webkit-animation-name: vhs-fade; 87 | animation-name: vhs-fade; 88 | -webkit-animation-duration: .4s; 89 | animation-duration: .4s; 90 | -webkit-animation-fill-mode: forwards; 91 | animation-fill-mode: forwards; 92 | } 93 | 94 | @-webkit-keyframes vhs-fade { 95 | 0% { opacity: 0 } 96 | 100% { opacity: 1 } 97 | } 98 | 99 | @keyframes vhs-fade { 100 | 0% { opacity: 0 } 101 | 100% { opacity: 1 } 102 | } 103 | .vhs-pop { 104 | -webkit-transform: scale(0); 105 | -ms-transform: scale(0); 106 | transform: scale(0); 107 | -webkit-animation-name: vhs-pop; 108 | animation-name: vhs-pop; 109 | -webkit-animation-duration: .2s; 110 | animation-duration: .2s; 111 | -webkit-animation-fill-mode: forwards; 112 | animation-fill-mode: forwards; 113 | } 114 | 115 | @-webkit-keyframes vhs-pop { 116 | 0% { -webkit-transform: scale(0); transform: scale(0) } 117 | 75% { -webkit-transform: scale(1.25); transform: scale(1.25) } 118 | 100% { -webkit-transform: scale(1); transform: scale(1) } 119 | } 120 | 121 | @keyframes vhs-pop { 122 | 0% { -webkit-transform: scale(0); transform: scale(0) } 123 | 75% { -webkit-transform: scale(1.25); transform: scale(1.25) } 124 | 100% { -webkit-transform: scale(1); transform: scale(1) } 125 | } 126 | .vhs-highlight { 127 | -webkit-animation-name: vhs-highlight; 128 | animation-name: vhs-highlight; 129 | -webkit-animation-duration: 2s; 130 | animation-duration: 2s; 131 | -webkit-animation-fill-mode: forwards; 132 | animation-fill-mode: forwards; 133 | } 134 | 135 | .vhs-highlight-text { 136 | -webkit-animation-name: vhs-highlight-text; 137 | animation-name: vhs-highlight-text; 138 | -webkit-animation-duration: 2s; 139 | animation-duration: 2s; 140 | } 141 | 142 | @-webkit-keyframes vhs-highlight { 143 | 0% { background-color: rgba(0, 255, 255, 0.5); background-color: rgba(127, 219, 255, 0.5) } 144 | 100% { background-color: rgba(0, 255, 255, 0); background-color: rgba(127, 219, 255, 0) } 145 | } 146 | 147 | @keyframes vhs-highlight { 148 | 0% { background-color: rgba(0, 255, 255, 0.5); background-color: rgba(127, 219, 255, 0.5) } 149 | 100% { background-color: rgba(0, 255, 255, 0); background-color: rgba(127, 219, 255, 0) } 150 | } 151 | 152 | @-webkit-keyframes vhs-highlight-text { 153 | 0% { color: blue; color: #0074d9 } 154 | 100% { color: inherit } 155 | } 156 | 157 | @keyframes vhs-highlight-text { 158 | 0% { color: blue; color: #0074d9 } 159 | 100% { color: inherit } 160 | } 161 | .vhs-left, 162 | .vhs-right, 163 | .vhs-top, 164 | .vhs-bottom { 165 | opacity: 0; 166 | -webkit-animation-duration: .6s; 167 | animation-duration: .6s; 168 | -webkit-animation-fill-mode: forwards; 169 | animation-fill-mode: forwards; 170 | } 171 | 172 | .vhs-left { 173 | -webkit-animation-name: vhs-left; 174 | animation-name: vhs-left; 175 | -webkit-transform: translateX(-12.5vw); 176 | -ms-transform: translateX(-12.5vw); 177 | transform: translateX(-12.5vw); 178 | } 179 | .vhs-right { 180 | -webkit-animation-name: vhs-right; 181 | animation-name: vhs-right; 182 | -webkit-transform: translateX(12.5vw); 183 | -ms-transform: translateX(12.5vw); 184 | transform: translateX(12.5vw); 185 | } 186 | .vhs-top { 187 | -webkit-animation-name: vhs-top; 188 | animation-name: vhs-top; 189 | -webkit-transform: translateY(-12.5vh); 190 | -ms-transform: translateY(-12.5vh); 191 | transform: translateY(-12.5vh); 192 | } 193 | .vhs-bottom { 194 | -webkit-animation-name: vhs-bottom; 195 | animation-name: vhs-bottom; 196 | -webkit-transform: translateY(12.5vh); 197 | -ms-transform: translateY(12.5vh); 198 | transform: translateY(12.5vh); 199 | } 200 | 201 | @-webkit-keyframes vhs-left { 202 | 0% { -webkit-transform: translateX(-12.5vw); transform: translateX(-12.5vw); opacity: 0; } 203 | 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 204 | } 205 | 206 | @keyframes vhs-left { 207 | 0% { -webkit-transform: translateX(-12.5vw); transform: translateX(-12.5vw); opacity: 0; } 208 | 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 209 | } 210 | 211 | @-webkit-keyframes vhs-right { 212 | 0% { -webkit-transform: translateX(12.5vw); transform: translateX(12.5vw); opacity: 0; } 213 | 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 214 | } 215 | 216 | @keyframes vhs-right { 217 | 0% { -webkit-transform: translateX(12.5vw); transform: translateX(12.5vw); opacity: 0; } 218 | 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } 219 | } 220 | 221 | @-webkit-keyframes vhs-top { 222 | 0% { -webkit-transform: translateY(-12.5vh); transform: translateY(-12.5vh); opacity: 0; } 223 | 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 224 | } 225 | 226 | @keyframes vhs-top { 227 | 0% { -webkit-transform: translateY(-12.5vh); transform: translateY(-12.5vh); opacity: 0; } 228 | 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 229 | } 230 | 231 | @-webkit-keyframes vhs-bottom { 232 | 0% { -webkit-transform: translateY(12.5vh); transform: translateY(12.5vh); opacity: 0; } 233 | 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 234 | } 235 | 236 | @keyframes vhs-bottom { 237 | 0% { -webkit-transform: translateY(12.5vh); transform: translateY(12.5vh); opacity: 0; } 238 | 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 239 | } 240 | .vhs-blur { 241 | -webkit-animation-name: vhs-blur; 242 | animation-name: vhs-blur; 243 | -webkit-animation-duration: 1s; 244 | animation-duration: 1s; 245 | -webkit-animation-fill-mode: forwards; 246 | animation-fill-mode: forwards; 247 | } 248 | 249 | @-webkit-keyframes vhs-blur { 250 | from { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: blur(32px); filter: blur(32px) } 251 | to { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: blur(0); filter: blur(0) } 252 | } 253 | 254 | @keyframes vhs-blur { 255 | from { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: blur(32px); filter: blur(32px) } 256 | to { filter: url('data:image/svg+xml;charset=utf-8,#filter'); -webkit-filter: blur(0); filter: blur(0) } 257 | } 258 | 259 | .vhs-highlight-pop { 260 | -webkit-transform: scale(0); 261 | -ms-transform: scale(0); 262 | transform: scale(0); 263 | -webkit-animation-name: vhs-pop, vhs-highlight; 264 | animation-name: vhs-pop, vhs-highlight; 265 | -webkit-animation-duration: .2s, 2s; 266 | animation-duration: .2s, 2s; 267 | -webkit-animation-fill-mode: forwards; 268 | animation-fill-mode: forwards; 269 | } 270 | 271 | .vhs-highlight-pop-text { 272 | -webkit-animation-name: vhs-pop, vhs-highlight-text; 273 | animation-name: vhs-pop, vhs-highlight-text; 274 | -webkit-animation-duration: .2s, 2s; 275 | animation-duration: .2s, 2s; 276 | } 277 | 278 | .vhs-delay-1 { -webkit-animation-delay: .1s; animation-delay: .1s } 279 | .vhs-delay-2 { -webkit-animation-delay: .2s; animation-delay: .2s } 280 | .vhs-delay-3 { -webkit-animation-delay: .4s; animation-delay: .4s } 281 | .vhs-delay-4 { -webkit-animation-delay: .6s; animation-delay: .6s } 282 | .vhs-delay-5 { -webkit-animation-delay: 1s; animation-delay: 1s } 283 | .vhs-delay-6 { -webkit-animation-delay: 2s; animation-delay: 2s } 284 | .vhs-duration-1 { -webkit-animation-duration: .1s; animation-duration: .1s } 285 | .vhs-duration-2 { -webkit-animation-duration: .2s; animation-duration: .2s } 286 | .vhs-duration-3 { -webkit-animation-duration: .4s; animation-duration: .4s } 287 | .vhs-duration-4 { -webkit-animation-duration: .6s; animation-duration: .6s } 288 | .vhs-duration-5 { -webkit-animation-duration: 1s; animation-duration: 1s } 289 | .vhs-duration-6 { -webkit-animation-duration: 2s; animation-duration: 2s } 290 | /* Initial Value */ 291 | /* .vhs-ease { animation-timing-function: ease } */ 292 | 293 | .vhs-linear { -webkit-animation-timing-function: linear; animation-timing-function: linear } 294 | .vhs-ease-in { -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in } 295 | .vhs-ease-out { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out } 296 | .vhs-ease-in-out { -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out } 297 | 298 | /* Reference */ 299 | /* cubic-bezier(0.1, 0.7, 1.0, 0.1) */ 300 | /* Steps */ 301 | .vhs-infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } 302 | .vhs-reverse { -webkit-animation-direction: reverse; animation-direction: reverse } 303 | .vhs-alternate { -webkit-animation-direction: alternate; animation-direction: alternate } 304 | .vhs-fill-forwards { -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards } 305 | .vhs-fill-backwards { -webkit-animation-fill-mode: backwards; animation-fill-mode: backwards } 306 | .vhs-fill-both { -webkit-animation-fill-mode: both; animation-fill-mode: both } 307 | .vhs-paused { -webkit-animation-play-state: paused; animation-play-state: paused } 308 | 309 | 310 | /* 311 | 312 | COLOR VARIABLES 313 | 314 | - Cool 315 | - Warm 316 | - Gray Scale 317 | 318 | */ 319 | 320 | :root { 321 | 322 | /* Cool */ 323 | 324 | 325 | /* Warm */ 326 | 327 | 328 | /* Gray scale */ 329 | 330 | } 331 | 332 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | VHS 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
25 |
26 |
27 |

vhs

28 |

Post-future CSS animations

29 |
30 |
31 | 32 | Github 33 | 34 | 35 | NPM 36 | 37 |
38 |
39 |
40 |
11 KB
41 |
1 KB gzipped
42 |
106 selectors
43 |
263 declarations
44 |
24 properties
45 |
46 |
47 | 48 | 49 | 50 |
51 |
52 | 53 |
54 | 55 |
56 |
57 | 
npm install vhs

Or use the CDN

58 | 
<link rel="stylesheet" href="http://d2v52k3cl9vedd.cloudfront.net/vhs/0.1.0/vhs.min.css">

Blur

59 |
60 |
61 |
.vhs-blur
62 |
63 |
64 | 
<div class="center p2">
 65 |   <div class="h2 bold vhs-blur js-demo">.vhs-blur</div>
 66 | </div>
67 |
68 |

Blur Reverse

69 |
70 |
71 |
.vhs-blur
72 |
73 |
74 | 
<div class="center p2">
 75 |   <div class="h2 bold vhs-blur vhs-reverse js-demo">.vhs-blur</div>
 76 | </div>
77 |
78 |

Flicker

79 |
80 |
81 |
.vhs-flicker
82 |
83 |
84 | 
<div class="center p2">
 85 |   <div class="h2 bold vhs-flicker js-demo">.vhs-flicker</div>
 86 | </div>
87 |
88 |

Flicker Reverse

89 |
90 |
91 |
.vhs-flicker.vhs-reverse
92 |
93 |
94 | 
<div class="h2 bold center p2">
 95 |   <div class="vhs-flicker vhs-reverse js-demo">.vhs-flicker.vhs-reverse</div>
 96 | </div>
97 |
98 |

Zoom

99 |
100 |
101 |
.vhs-zoom
102 |
103 |
104 | 
<div class="h2 bold center p2">
105 |   <div class="vhs-zoom js-demo">.vhs-zoom</div>
106 | </div>
107 |
108 |

Zoom Reverse

109 |
110 |
111 |
.vhs-zoom .vhs-reverse
112 |
113 |
114 | 
<div class="h2 bold center p2">
115 |   <div class="vhs-zoom vhs-reverse js-demo">.vhs-zoom .vhs-reverse</div>
116 | </div>
117 |
118 |

Fade

119 |
120 |
121 |
.vhs-fade
122 |
123 |
124 | 
<div class="h2 bold center p2">
125 |   <div class="vhs-fade js-demo">.vhs-fade</div>
126 | </div>
127 |
128 |

Fade Reverse

129 |
130 |
131 |
.vhs-fade .vhs-reverse
132 |
133 |
134 | 
<div class="h2 bold center p2">
135 |   <div class="vhs-fade vhs-reverse js-demo">.vhs-fade .vhs-reverse</div>
136 | </div>
137 |
138 |

Pulsate Effect

139 |
140 |
141 |
.vhs-fade .vhs-duration-6 .vhs-infinite .vhs-alternate
142 |
143 |
144 | 
<div class="h2 bold center p2">
145 |   <div class="vhs-fade vhs-duration-6 vhs-infinite vhs-alternate js-demo">.vhs-fade .vhs-duration-6 .vhs-infinite .vhs-alternate</div>
146 | </div>
147 |
148 |

Pop

149 |
150 |
151 |
.vhs-pop
152 |
153 |
154 | 
<div class="h2 bold center p2">
155 |   <div class="vhs-pop js-demo">.vhs-pop</div>
156 | </div>
157 |
158 |

Pop Reverse

159 |
160 |
161 |
.vhs-pop .vhs-reverse
162 |
163 |
164 | 
<div class="h2 bold center p2">
165 |   <div class="vhs-pop vhs-reverse js-demo">.vhs-pop .vhs-reverse</div>
166 | </div>
167 |
168 |

Highlight

169 |
170 |
171 |
.vhs-highlight
172 |
173 |
174 | 
<div class="h2 bold center p2">
175 |   <div class="vhs-highlight js-demo">.vhs-highlight</div>
176 | </div>
177 |
178 |

Highlight Text

179 |
180 |
181 |
.vhs-highlight-text
182 |
183 |
184 | 
<div class="h2 bold center p2">
185 |   <div class="vhs-highlight-text js-demo">.vhs-highlight-text</div>
186 | </div>
187 |
188 |

Flash

189 |
190 |
191 |
.vhs-flash
192 |
193 |
194 | 
<div class="h2 bold center p2">
195 |   <div class="vhs-flash js-demo">.vhs-flash</div>
196 | </div>
197 |
198 |
199 |
200 |
201 |
.vhs-flash .vhs-duration-2
202 |
.vhs-flash .vhs-duration-3
203 |
.vhs-flash .vhs-duration-4
204 |
.vhs-flash .vhs-duration-5
205 |
.vhs-flash vhs-duration-6
206 |
207 |
208 | 
<div class="h2 bold center p2">
209 |   <div class="vhs-flash vhs-duration-2 js-demo">.vhs-flash .vhs-duration-2</div>
210 |   <div class="vhs-flash vhs-duration-3 js-demo">.vhs-flash .vhs-duration-3</div>
211 |   <div class="vhs-flash vhs-duration-4 js-demo">.vhs-flash .vhs-duration-4</div>
212 |   <div class="vhs-flash vhs-duration-5 js-demo">.vhs-flash .vhs-duration-5</div>
213 |   <div class="vhs-flash vhs-duration-6 js-demo">.vhs-flash vhs-duration-6</div>
214 | </div>
215 |
216 |

Left

217 |
218 |
219 |
.vhs-left
220 |
221 |
222 | 
<div class="h2 bold center p2">
223 |   <div class="vhs-left js-demo">.vhs-left</div>
224 | </div>
225 |
226 |

Left Reverse

227 |
228 |
229 |
.vhs-left .vhs-reverse
230 |
231 |
232 | 
<div class="h2 bold center p2">
233 |   <div class="vhs-left vhs-reverse js-demo">.vhs-left .vhs-reverse</div>
234 | </div>
235 |
236 |
237 |
238 |
239 |
.vhs-right
240 |
241 |
242 | 
<div class="h2 bold center p2">
243 |   <div class="vhs-right js-demo">.vhs-right</div>
244 | </div>
245 |
246 |

Right Reverse

247 |
248 |
249 |
.vhs-right .vhs-reverse
250 |
251 |
252 | 
<div class="h2 bold center p2">
253 |   <div class="vhs-right vhs-reverse js-demo">.vhs-right .vhs-reverse</div>
254 | </div>
255 |
256 |

Top

257 |
258 |
259 |
.vhs-top
260 |
261 |
262 | 
<div class="h2 bold center p2">
263 |   <div class="vhs-top js-demo">.vhs-top</div>
264 | </div>
265 |
266 |

Top Reverse

267 |
268 |
269 |
.vhs-top .vhs-reverse
270 |
271 |
272 | 
<div class="h2 bold center p2">
273 |   <div class="vhs-top vhs-reverse js-demo">.vhs-top .vhs-reverse</div>
274 | </div>
275 |
276 |

Bottom

277 |
278 |
279 |
.vhs-bottom
280 |
281 |
282 | 
<div class="h2 bold center p2">
283 |   <div class="vhs-bottom js-demo">.vhs-bottom</div>
284 | </div>
285 |
286 |

Bottom Reverse

287 |
288 |
289 |
.vhs-bottom .vhs-reverse
290 |
291 |
292 | 
<div class="h2 bold center p2">
293 |   <div class="vhs-bottom vhs-reverse js-demo">.vhs-bottom .vhs-reverse</div>
294 | </div>
295 |
296 |
297 |

Highlight Pop

298 |
299 |
300 |
.vhs-highlight-pop
301 |
302 |
303 | 
<div class="h2 bold center p2">
304 |   <div class="vhs-highlight-pop js-demo">.vhs-highlight-pop</div>
305 | </div>
306 |
307 |

Utility

Delay

308 | 309 | 310 | 311 | 312 | 313 | 314 | 315 | 316 | 317 | 318 | 319 | 320 | 321 | 322 | 323 | 324 | 325 | 326 | 327 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 335 | 336 | 337 | 338 | 339 | 340 |
classdescription
.vhs-delay-1animation-delay: 1
.vhs-delay-2animation-delay: 2
.vhs-delay-3animation-delay: 3
.vhs-delay-4animation-delay: 4
.vhs-delay-5animation-delay: 5
.vhs-delay-6animation-delay: 6
341 |

Duration

342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | 355 | 356 | 357 | 358 | 359 | 360 | 361 | 362 | 363 | 364 | 365 | 366 | 367 | 368 | 369 | 370 | 371 | 372 | 373 | 374 |
classdescription
.vhs-duration-1animation-duration: 1
.vhs-duration-2animation-duration: 2
.vhs-duration-3animation-duration: 3
.vhs-duration-4animation-duration: 4
.vhs-duration-5animation-duration: 5
.vhs-duration-6animation-duration: 6
375 |

Timing Function

376 | 377 | 378 | 379 | 380 | 381 | 382 | 383 | 384 | 385 | 386 | 387 | 388 | 389 | 390 | 391 | 392 | 393 | 394 | 395 | 396 | 397 | 398 | 399 | 400 |
classdescription
.vhs-ease-inanimation-timing-function: ease-in
.vhs-ease-outanimation-timing-function: ease-out
.vhs-ease-in-outanimation-timing-function: ease-in-out
.vhs-linearanimation-timing-function: linear
401 |

Iteration Count

402 | 403 | 404 | 405 | 406 | 407 | 408 | 409 | 410 | 411 | 412 | 413 | 414 |
classdescription
.vhs-infiniteanimation-iteration-count: infinite
415 |

Direction

416 | 417 | 418 | 419 | 420 | 421 | 422 | 423 | 424 | 425 | 426 | 427 | 428 | 429 | 430 | 431 | 432 |
classdescription
.vhs-reverseanimation-direction: reverse
.vhs-alternateanimation-direction: alternate
433 |

Fill Mode

434 | 435 | 436 | 437 | 438 | 439 | 440 | 441 | 442 | 443 | 444 | 445 | 446 | 447 | 448 | 449 | 450 | 451 | 452 | 453 | 454 |
classdescription
.vhs-fill-forwardsanimation-fill-mode: forwards
.vhs-fill-backwardsanimation-fill-mode: backwards
.vhs-fill-bothanimation-fill-mode: both
455 |

Play State

456 | 457 | 458 | 459 | 460 | 461 | 462 | 463 | 464 | 465 | 466 | 467 | 468 |
classdescription
.vhs-pausedanimation-play-state: paused
469 | 470 | 471 |
472 |
473 | 668 |
669 |
670 | 671 |
672 | 673 |
674 | Github 675 | Download 676 |
677 | 678 |
679 | 680 | 694 | 695 |
696 | 697 | 698 | 699 | 700 | 701 | 702 | --------------------------------------------------------------------------------