├── sass
    ├── placeholder.sass
    └── placeholder
    │   ├── _variables.sass
    │   ├── _reset.sass
    │   └── _layout.sass
├── README.md
├── package.json
├── css
    ├── placeholder.min.css
    └── placeholder.css
├── index.html
├── .gitignore
├── gulpfile.js
└── .csscomb.json


/sass/placeholder.sass:
--------------------------------------------------------------------------------
1 | @import "placeholder/variables"
2 | @import "placeholder/reset"
3 | @import "placeholder/layout"
4 | 


--------------------------------------------------------------------------------
/sass/placeholder/_variables.sass:
--------------------------------------------------------------------------------
 1 | // Colors
 2 | 
 3 | $black: #000 !default
 4 | $white: #fff !default
 5 | 
 6 | // Miscellaneous
 7 | 
 8 | $easing: ease-out !default
 9 | $speed: 86ms !default
10 | 


--------------------------------------------------------------------------------
/sass/placeholder/_reset.sass:
--------------------------------------------------------------------------------
 1 | html
 2 |     box-sizing: border-box
 3 | 
 4 | *,
 5 | *:before,
 6 | *:after
 7 |     box-sizing: inherit
 8 | 
 9 | *
10 |     margin: 0
11 |     padding: 0
12 |     border: 0
13 |     font-size: 100%
14 |     font-weight: normal
15 |     vertical-align: baseline
16 |     background: transparent
17 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Placeholder
 2 | 
 3 | A lot of designers seem to be talking about user experience these days. Placeholder give you better user experience for sure. Placeholder is a Progressive Content Loading Object. CSS only. You can use Placeholder before loading your web content, and, after loading replece Placeholder with real content. Really cool idea!!! hummm.  
 4 | 
 5 | ### Demo
 6 | https://zafree.github.io/placeholder
 7 | 
 8 | ### Who
 9 | 
10 | Written by <a href="http://zafree.github.io/" target="_blank">Zafree</a>, made better by you.
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "placeholder",
 3 |   "version": "1.0.0",
 4 |   "description": "Progressive Content Loading Object",
 5 |   "main": "gulpfile.js",
 6 |   "scripts": {
 7 |     "test": "echo \"Error: no test specified\" && exit 1"
 8 |   },
 9 |   "homepage": "https://zafree.github.io/placeholder",
10 |   "author": "Zafree",
11 |   "license": "MIT",
12 |   "devDependencies": {
13 |     "browser-sync": "^2.16.0",
14 |     "gulp": "^3.9.1",
15 |     "gulp-autoprefixer": "^3.1.1",
16 |     "gulp-csscomb": "^3.0.8",
17 |     "gulp-csso": "^2.0.0",
18 |     "gulp-header": "^1.8.8",
19 |     "gulp-plumber": "^1.1.0",
20 |     "gulp-rename": "^1.2.2",
21 |     "gulp-ruby-sass": "^2.1.0"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/css/placeholder.min.css:
--------------------------------------------------------------------------------
1 | /**
2 |  * Placeholder v1.0.0 - Progressive Content Loading Object
3 |  * @link https://zafree.github.io/placeholder
4 |  * @copyright 2015-2016 Zafree
5 |  * @license MIT
6 |  */
7 | html{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*,:after,:before{-webkit-box-sizing:inherit;-moz-box-sizing:inherit;box-sizing:inherit}*{margin:0;padding:0;vertical-align:baseline;border:0;background:0 0;font-size:100%;font-weight:400;-webkit-transition:none 172ms ease-out;transition:none 172ms ease-out;-webkit-transition-property:all;transition-property:all}.App,.Placeholder{position:relative;height:auto}.App{overflow:hidden;max-width:600px;min-height:100%;margin:0 auto;padding:50px 15px 30px}.Placeholder{display:inline-block;width:100%;margin-bottom:20px;background:#fff}.Placeholder__avatar{float:left;width:36px;height:36px;margin-right:10px;-webkit-border-radius:500px;border-radius:500px;background-color:rgba(0,0,0,.05)}.Placeholder__metaInline{position:relative;display:inline-block;width:70%;height:36px;margin-bottom:10px}.Placeholder__metaInline::after,.Placeholder__metaInline::before{position:absolute;top:6px;width:60%;height:8px;content:"";background-color:rgba(0,0,0,.05)}.Placeholder__metaInline::after{top:22px;width:40%}.Placeholder__inline{display:inline-block;float:left;clear:both;width:100%;height:10px;margin-top:7px;margin-bottom:7px;background-color:rgba(0,0,0,.05)}.Placeholder__inline--leftover{width:80%}.Placeholder__img{display:inline-block;width:100%;height:320px;background-color:rgba(0,0,0,.05)}.Credits{margin-top:20px;color:rgba(0,0,0,.3);font-family:"Helvetica Neue","Helvetica","Arial",sans-serif;font-size:14px}.Credits span{font-size:12px}.Credits a{text-decoration:none;color:rgba(0,0,0,.5)}.Credits a:hover{color:#0099e5}


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html class="">
 3 | <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1">
 7 |     <title>Placeholder 2016</title>
 8 | 
 9 |     <link rel="stylesheet" href="css/placeholder.min.css">
10 | 
11 | </head>
12 | <body>
13 | 
14 |     <div class="App">
15 |         <div class="Placeholder">
16 |             <div class="Placeholder__avatar"></div>
17 |             <div class="Placeholder__metaInline"></div>
18 |             <div class="Placeholder__inline"></div>
19 |             <div class="Placeholder__inline"></div>
20 |             <div class="Placeholder__inline"></div>
21 |             <div class="Placeholder__inline Placeholder__inline--leftover"></div>
22 |         </div>
23 |         <div class="Placeholder">
24 |             <div class="Placeholder__inline"></div>
25 |             <div class="Placeholder__inline"></div>
26 |             <div class="Placeholder__inline Placeholder__inline--leftover"></div>
27 |         </div>
28 |         <div class="Placeholder">
29 |             <div class="Placeholder__inline"></div>
30 |             <div class="Placeholder__inline Placeholder__inline--leftover"></div>
31 |         </div>
32 |         <div class="Placeholder">
33 |             <div class="Placeholder__inline"></div>
34 |         </div>
35 | 
36 |         <div class="Credits">
37 |             <iframe src="https://ghbtns.com/github-btn.html?user=zafree&repo=placeholder&type=star&count=true" frameborder="0" scrolling="0" width="auto" height="20px" style="display:block; margin-bottom: 10px; margin-top: 15px"></iframe>
38 |             <iframe src="https://ghbtns.com/github-btn.html?user=zafree&type=follow&count=true" frameborder="0" scrolling="0" width="auto" height="20px" style="display:block; margin-bottom: 15px;"></iframe>
39 |             2016 Placeholder by <span><a href="http://zafree.github.io/" target="_blank">Zafree</a></span>
40 |         </div>
41 |     </div>
42 | 
43 | </body>
44 | </html>
45 | 


--------------------------------------------------------------------------------
/sass/placeholder/_layout.sass:
--------------------------------------------------------------------------------
 1 | *
 2 |     transition: none $speed*2 $easing
 3 |     transition-property: all
 4 | 
 5 | .App
 6 |     position: relative
 7 |     max-width: 600px
 8 |     padding: 50px 15px 30px
 9 |     margin: 0 auto
10 |     height: auto
11 |     min-height: 100%
12 |     overflow: hidden
13 | 
14 | .Placeholder
15 |     background: #fff
16 |     height: auto
17 |     position: relative
18 |     display: inline-block
19 |     width: 100%
20 |     margin-bottom: 20px
21 |     &__avatar
22 |         height: 36px
23 |         width: 36px
24 |         background-color: rgba(0,0,0,.05)
25 |         border-radius: 500px
26 |         float: left
27 |         margin-right: 10px
28 |     &__metaInline
29 |         height: 36px
30 |         width: 70%
31 |         display: inline-block
32 |         position: relative
33 |         margin-bottom: 10px
34 |         &::before
35 |             content: ""
36 |             position: absolute
37 |             height: 8px
38 |             width: 60%
39 |             background-color: rgba(0,0,0,.05)
40 |             top: 6px
41 |         &::after
42 |             content: ""
43 |             position: absolute
44 |             height: 8px
45 |             width: 40%
46 |             background-color: rgba(0,0,0,.05)
47 |             top: 22px
48 |     &__inline
49 |         background-color: rgba(0,0,0,.05)
50 |         display: inline-block
51 |         height: 10px
52 |         margin-top: 7px
53 |         margin-bottom: 7px
54 |         width: 100%
55 |         float: left
56 |         clear: both
57 |         &--leftover
58 |             width: 80%
59 |     &__img
60 |         display: inline-block
61 |         width: 100%
62 |         height: 320px
63 |         background-color: rgba(0,0,0,.05)
64 | 
65 | .Credits
66 |     font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif
67 |     margin-top: 20px
68 |     font-size: 14px
69 |     color: rgba($black, 0.3)
70 |     span
71 |         font-size: 12px
72 |     a
73 |         color: rgba($black, 0.5)
74 |         text-decoration: none
75 |         &:hover
76 |             color: #0099e5
77 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Created by https://www.gitignore.io/api/node,sass,windows,osx,linux
  2 | 
  3 | ### Node ###
  4 | # Logs
  5 | logs
  6 | *.log
  7 | npm-debug.log*
  8 | 
  9 | # Runtime data
 10 | pids
 11 | *.pid
 12 | *.seed
 13 | 
 14 | # Directory for instrumented libs generated by jscoverage/JSCover
 15 | lib-cov
 16 | 
 17 | # Coverage directory used by tools like istanbul
 18 | coverage
 19 | 
 20 | # nyc test coverage
 21 | .nyc_output
 22 | 
 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 24 | .grunt
 25 | 
 26 | # node-waf configuration
 27 | .lock-wscript
 28 | 
 29 | # Compiled binary addons (http://nodejs.org/api/addons.html)
 30 | build/Release
 31 | 
 32 | # Dependency directories
 33 | node_modules
 34 | jspm_packages
 35 | 
 36 | # Optional npm cache directory
 37 | .npm
 38 | 
 39 | # Optional REPL history
 40 | .node_repl_history
 41 | 
 42 | 
 43 | ### Sass ###
 44 | .sass-cache/
 45 | *.css.map
 46 | 
 47 | 
 48 | ### Windows ###
 49 | # Windows image file caches
 50 | Thumbs.db
 51 | ehthumbs.db
 52 | 
 53 | # Folder config file
 54 | Desktop.ini
 55 | 
 56 | # Recycle Bin used on file shares
 57 | $RECYCLE.BIN/
 58 | 
 59 | # Windows Installer files
 60 | *.cab
 61 | *.msi
 62 | *.msm
 63 | *.msp
 64 | 
 65 | # Windows shortcuts
 66 | *.lnk
 67 | 
 68 | 
 69 | ### OSX ###
 70 | *.DS_Store
 71 | .AppleDouble
 72 | .LSOverride
 73 | 
 74 | # Icon must end with two \r
 75 | Icon
 76 | 
 77 | 
 78 | # Thumbnails
 79 | ._*
 80 | 
 81 | # Files that might appear in the root of a volume
 82 | .DocumentRevisions-V100
 83 | .fseventsd
 84 | .Spotlight-V100
 85 | .TemporaryItems
 86 | .Trashes
 87 | .VolumeIcon.icns
 88 | .com.apple.timemachine.donotpresent
 89 | 
 90 | # Directories potentially created on remote AFP share
 91 | .AppleDB
 92 | .AppleDesktop
 93 | Network Trash Folder
 94 | Temporary Items
 95 | .apdisk
 96 | 
 97 | 
 98 | ### Linux ###
 99 | *~
100 | 
101 | # temporary files which can be created if a process still has a handle open of a deleted file
102 | .fuse_hidden*
103 | 
104 | # KDE directory preferences
105 | .directory
106 | 
107 | # Linux trash folder which might appear on any partition or disk
108 | .Trash-*
109 | 


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | var gulp         = require('gulp'),
 2 |     autoprefixer = require('gulp-autoprefixer'),
 3 |     csscomb      = require('gulp-csscomb'),
 4 |     csso         = require('gulp-csso'),
 5 |     header       = require('gulp-header'),
 6 |     plumber      = require('gulp-plumber'),
 7 |     rename       = require('gulp-rename'),
 8 |     sass         = require('gulp-ruby-sass'),
 9 |     browserSync  = require('browser-sync'),
10 |     reload       = browserSync.reload;
11 | 
12 | var pkg = require('./package.json');
13 | var banner = ['/**',
14 |               ' * Placeholder v<%= pkg.version %> - <%= pkg.description %>',
15 |               ' * @link <%= pkg.homepage %>',
16 |               ' * @copyright 2015-<%= new Date().getFullYear() %> <%= pkg.author %>',
17 |               ' * @license <%= pkg.license %>',
18 |                 ' */',
19 |                 ''].join('\n');
20 | 
21 | 
22 | // sass
23 | gulp.task('sass', function(){
24 |     return sass('sass/'+pkg.name+'.sass', { sourcemap: true })
25 |           .pipe(plumber())
26 |           .pipe(autoprefixer({
27 |             browsers: ['Android >= 2.1',
28 |                        'Chrome >= 21',
29 |                        'Edge >= 12',
30 |                        'Explorer >= 7',
31 |                        'Firefox >= 17',
32 |                        'Opera >= 12.1',
33 |                        'Safari >= 6.0'],
34 |             cascade: false}))
35 |           .pipe(csscomb())
36 |           .pipe(rename({basename: pkg.name}))
37 |           .pipe(header(banner, { pkg : pkg } ))
38 |           .pipe(gulp.dest('css'))
39 |           .pipe(browserSync.stream())
40 |           .pipe(csso())
41 |       	  .pipe(rename({suffix: '.min'}))
42 |           .pipe(header(banner, { pkg : pkg } ))
43 |       	  .pipe(gulp.dest('css'))
44 |           .pipe(browserSync.stream());
45 | });
46 | 
47 | // serve
48 | gulp.task('serve', function () {
49 |     browserSync.init({
50 |         server: {
51 |             baseDir: "."
52 |         },
53 |         notify: false
54 |     });
55 | });
56 | 
57 | // Watch
58 | gulp.task('watch', function(){
59 |     gulp.watch('sass/**/*', ['sass']);
60 |     gulp.watch("*.html").on("change", reload);
61 | });
62 | 
63 | gulp.task('default', ['sass', 'serve', 'watch']);
64 | 


--------------------------------------------------------------------------------
/css/placeholder.css:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * Placeholder v1.0.0 - Progressive Content Loading Object
  3 |  * @link https://zafree.github.io/placeholder
  4 |  * @copyright 2015-2016 Zafree
  5 |  * @license MIT
  6 |  */
  7 | html {
  8 |     -webkit-box-sizing: border-box;
  9 |        -moz-box-sizing: border-box;
 10 |             box-sizing: border-box;
 11 | }
 12 | 
 13 | *,
 14 | *:before,
 15 | *:after {
 16 |     -webkit-box-sizing: inherit;
 17 |        -moz-box-sizing: inherit;
 18 |             box-sizing: inherit;
 19 | }
 20 | 
 21 | * {
 22 |     margin: 0;
 23 |     padding: 0;
 24 | 
 25 |     vertical-align: baseline;
 26 | 
 27 |     border: 0;
 28 |     background: transparent; 
 29 | 
 30 |     font-size: 100%;
 31 |     font-weight: normal;
 32 | }
 33 | 
 34 | * {
 35 |     -webkit-transition: none 172ms ease-out;
 36 |             transition: none 172ms ease-out;
 37 |     -webkit-transition-property: all;
 38 |             transition-property: all;
 39 | }
 40 | 
 41 | .App {
 42 |     position: relative;
 43 | 
 44 |     overflow: hidden; 
 45 | 
 46 |     max-width: 600px;
 47 |     height: auto;
 48 |     min-height: 100%;
 49 |     margin: 0 auto;
 50 |     padding: 50px 15px 30px;
 51 | }
 52 | 
 53 | .Placeholder {
 54 |     position: relative;
 55 | 
 56 |     display: inline-block;
 57 | 
 58 |     width: 100%;
 59 |     height: auto;
 60 |     margin-bottom: 20px; 
 61 | 
 62 |     background: #fff;
 63 | }
 64 | .Placeholder__avatar {
 65 |     float: left;
 66 | 
 67 |     width: 36px;
 68 |     height: 36px;
 69 |     margin-right: 10px; 
 70 | 
 71 |     -webkit-border-radius: 500px;
 72 |             border-radius: 500px;
 73 |     background-color: rgba(0, 0, 0, .05);
 74 | }
 75 | .Placeholder__metaInline {
 76 |     position: relative;
 77 | 
 78 |     display: inline-block;
 79 | 
 80 |     width: 70%;
 81 |     height: 36px;
 82 |     margin-bottom: 10px;
 83 | }
 84 | .Placeholder__metaInline::before {
 85 |     position: absolute;
 86 |     top: 6px; 
 87 | 
 88 |     width: 60%;
 89 |     height: 8px;
 90 | 
 91 |     content: "";
 92 | 
 93 |     background-color: rgba(0, 0, 0, .05);
 94 | }
 95 | .Placeholder__metaInline::after {
 96 |     position: absolute;
 97 |     top: 22px; 
 98 | 
 99 |     width: 40%;
100 |     height: 8px;
101 | 
102 |     content: "";
103 | 
104 |     background-color: rgba(0, 0, 0, .05);
105 | }
106 | .Placeholder__inline {
107 |     display: inline-block;
108 |     float: left;
109 |     clear: both; 
110 | 
111 |     width: 100%;
112 |     height: 10px;
113 |     margin-top: 7px;
114 |     margin-bottom: 7px;
115 | 
116 |     background-color: rgba(0, 0, 0, .05);
117 | }
118 | .Placeholder__inline--leftover {
119 |     width: 80%;
120 | }
121 | .Placeholder__img {
122 |     display: inline-block;
123 | 
124 |     width: 100%;
125 |     height: 320px;
126 | 
127 |     background-color: rgba(0, 0, 0, .05);
128 | }
129 | 
130 | .Credits {
131 |     margin-top: 20px;
132 | 
133 |     color: rgba(0, 0, 0, .3); 
134 | 
135 |     font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
136 |     font-size: 14px;
137 | }
138 | .Credits span {
139 |     font-size: 12px;
140 | }
141 | .Credits a {
142 |     text-decoration: none; 
143 | 
144 |     color: rgba(0, 0, 0, .5);
145 | }
146 | .Credits a:hover {
147 |     color: #0099e5;
148 | }
149 | 
150 | 
151 | 


--------------------------------------------------------------------------------
/.csscomb.json:
--------------------------------------------------------------------------------
  1 | {
  2 |     "exclude": [
  3 |         ".git/**",
  4 |         "node_modules/**",
  5 |         "bower_components/**"
  6 |     ],
  7 | 
  8 |     "remove-empty-rulesets": true,
  9 |     "always-semicolon": true,
 10 |     "color-case": "lower",
 11 |     "block-indent": "    ",
 12 |     "color-shorthand": true,
 13 |     "eof-newline": true,
 14 |     "leading-zero": false,
 15 |     "quotes": "double",
 16 |     "sort-order-fallback": "abc",
 17 |     "space-before-colon": "",
 18 |     "space-after-colon": " ",
 19 |     "space-before-combinator": " ",
 20 |     "space-after-combinator": " ",
 21 |     "space-between-declarations": "\n",
 22 |     "space-before-opening-brace": " ",
 23 |     "space-after-opening-brace": "\n",
 24 |     "space-after-selector-delimiter": "\n",
 25 |     "space-before-selector-delimiter": "",
 26 |     "space-before-closing-brace": "\n",
 27 |     "strip-spaces": true,
 28 |     "tab-size": true,
 29 |     "unitless-zero": true,
 30 |     "vendor-prefix-align": true,
 31 | 
 32 |     "sort-order": [
 33 |         [
 34 |             "position",
 35 |             "z-index",
 36 |             "top",
 37 |             "right",
 38 |             "bottom",
 39 |             "left"
 40 |         ],
 41 |         [
 42 |             "display",
 43 |             "visibility",
 44 |             "float",
 45 |             "clear",
 46 |             "overflow",
 47 |             "overflow-x",
 48 |             "overflow-y",
 49 |             "-ms-overflow-x",
 50 |             "-ms-overflow-y",
 51 |             "-webkit-overflow-scrolling",
 52 |             "clip",
 53 |             "zoom",
 54 |             "flex-direction",
 55 |             "flex-order",
 56 |             "flex-pack",
 57 |             "flex-align",
 58 |             "flex"
 59 |         ],
 60 |         [
 61 |             "-webkit-box-sizing",
 62 |             "-moz-box-sizing",
 63 |             "box-sizing",
 64 |             "width",
 65 |             "min-width",
 66 |             "max-width",
 67 |             "height",
 68 |             "min-height",
 69 |             "max-height",
 70 |             "margin",
 71 |             "margin-top",
 72 |             "margin-right",
 73 |             "margin-bottom",
 74 |             "margin-left",
 75 |             "padding",
 76 |             "padding-top",
 77 |             "padding-right",
 78 |             "padding-bottom",
 79 |             "padding-left"
 80 |         ],
 81 |         [
 82 |             "table-layout",
 83 |             "empty-cells",
 84 |             "caption-side",
 85 |             "border-spacing",
 86 |             "border-collapse",
 87 |             "list-style",
 88 |             "list-style-position",
 89 |             "list-style-type",
 90 |             "list-style-image"
 91 |         ],
 92 |         [
 93 |             "content",
 94 |             "quotes",
 95 |             "counter-reset",
 96 |             "counter-increment",
 97 |             "resize",
 98 |             "cursor",
 99 |             "-webkit-user-select",
100 |             "-moz-user-select",
101 |             "-ms-user-select",
102 |             "user-select",
103 |             "nav-index",
104 |             "nav-up",
105 |             "nav-right",
106 |             "nav-down",
107 |             "nav-left",
108 |             "-webkit-transition",
109 |             "-moz-transition",
110 |             "-ms-transition",
111 |             "-o-transition",
112 |             "transition",
113 |             "-webkit-transition-delay",
114 |             "-moz-transition-delay",
115 |             "-ms-transition-delay",
116 |             "-o-transition-delay",
117 |             "transition-delay",
118 |             "-webkit-transition-timing-function",
119 |             "-moz-transition-timing-function",
120 |             "-ms-transition-timing-function",
121 |             "-o-transition-timing-function",
122 |             "transition-timing-function",
123 |             "-webkit-transition-duration",
124 |             "-moz-transition-duration",
125 |             "-ms-transition-duration",
126 |             "-o-transition-duration",
127 |             "transition-duration",
128 |             "-webkit-transition-property",
129 |             "-moz-transition-property",
130 |             "-ms-transition-property",
131 |             "-o-transition-property",
132 |             "transition-property",
133 |             "-webkit-transform",
134 |             "-moz-transform",
135 |             "-ms-transform",
136 |             "-o-transform",
137 |             "transform",
138 |             "-webkit-transform-origin",
139 |             "-moz-transform-origin",
140 |             "-ms-transform-origin",
141 |             "-o-transform-origin",
142 |             "transform-origin",
143 |             "-webkit-animation",
144 |             "-moz-animation",
145 |             "-ms-animation",
146 |             "-o-animation",
147 |             "animation",
148 |             "-webkit-animation-name",
149 |             "-moz-animation-name",
150 |             "-ms-animation-name",
151 |             "-o-animation-name",
152 |             "animation-name",
153 |             "-webkit-animation-duration",
154 |             "-moz-animation-duration",
155 |             "-ms-animation-duration",
156 |             "-o-animation-duration",
157 |             "animation-duration",
158 |             "-webkit-animation-play-state",
159 |             "-moz-animation-play-state",
160 |             "-ms-animation-play-state",
161 |             "-o-animation-play-state",
162 |             "animation-play-state",
163 |             "-webkit-animation-timing-function",
164 |             "-moz-animation-timing-function",
165 |             "-ms-animation-timing-function",
166 |             "-o-animation-timing-function",
167 |             "animation-timing-function",
168 |             "-webkit-animation-delay",
169 |             "-moz-animation-delay",
170 |             "-ms-animation-delay",
171 |             "-o-animation-delay",
172 |             "animation-delay",
173 |             "-webkit-animation-iteration-count",
174 |             "-moz-animation-iteration-count",
175 |             "-ms-animation-iteration-count",
176 |             "-o-animation-iteration-count",
177 |             "animation-iteration-count",
178 |             "-webkit-animation-direction",
179 |             "-moz-animation-direction",
180 |             "-ms-animation-direction",
181 |             "-o-animation-direction",
182 |             "animation-direction",
183 |             "text-align",
184 |             "-webkit-text-align-last",
185 |             "-moz-text-align-last",
186 |             "-ms-text-align-last",
187 |             "text-align-last",
188 |             "vertical-align",
189 |             "white-space",
190 |             "text-decoration",
191 |             "text-emphasis",
192 |             "text-emphasis-color",
193 |             "text-emphasis-style",
194 |             "text-emphasis-position",
195 |             "text-indent",
196 |             "-ms-text-justify",
197 |             "text-justify",
198 |             "text-transform",
199 |             "letter-spacing",
200 |             "word-spacing",
201 |             "-ms-writing-mode",
202 |             "text-outline",
203 |             "text-transform",
204 |             "text-wrap",
205 |             "text-overflow",
206 |             "-ms-text-overflow",
207 |             "text-overflow-ellipsis",
208 |             "text-overflow-mode",
209 |             "-ms-word-wrap",
210 |             "word-wrap",
211 |             "word-break",
212 |             "-ms-word-break",
213 |             "-moz-tab-size",
214 |             "-o-tab-size",
215 |             "tab-size",
216 |             "-webkit-hyphens",
217 |             "-moz-hyphens",
218 |             "hyphens",
219 |             "pointer-events"
220 |         ],
221 |         [
222 |             "opacity",
223 |             "filter:progid:DXImageTransform.Microsoft.Alpha(Opacity",
224 |             "-ms-filter:\\'progid:DXImageTransform.Microsoft.Alpha",
225 |             "-ms-interpolation-mode",
226 |             "color",
227 |             "border",
228 |             "border-collapse",
229 |             "border-width",
230 |             "border-style",
231 |             "border-color",
232 |             "border-top",
233 |             "border-top-width",
234 |             "border-top-style",
235 |             "border-top-color",
236 |             "border-right",
237 |             "border-right-width",
238 |             "border-right-style",
239 |             "border-right-color",
240 |             "border-bottom",
241 |             "border-bottom-width",
242 |             "border-bottom-style",
243 |             "border-bottom-color",
244 |             "border-left",
245 |             "border-left-width",
246 |             "border-left-style",
247 |             "border-left-color",
248 |             "-webkit-border-radius",
249 |             "-moz-border-radius",
250 |             "border-radius",
251 |             "-webkit-border-top-left-radius",
252 |             "-moz-border-radius-topleft",
253 |             "border-top-left-radius",
254 |             "-webkit-border-top-right-radius",
255 |             "-moz-border-radius-topright",
256 |             "border-top-right-radius",
257 |             "-webkit-border-bottom-right-radius",
258 |             "-moz-border-radius-bottomright",
259 |             "border-bottom-right-radius",
260 |             "-webkit-border-bottom-left-radius",
261 |             "-moz-border-radius-bottomleft",
262 |             "border-bottom-left-radius",
263 |             "-webkit-border-image",
264 |             "-moz-border-image",
265 |             "-o-border-image",
266 |             "border-image",
267 |             "-webkit-border-image-source",
268 |             "-moz-border-image-source",
269 |             "-o-border-image-source",
270 |             "border-image-source",
271 |             "-webkit-border-image-slice",
272 |             "-moz-border-image-slice",
273 |             "-o-border-image-slice",
274 |             "border-image-slice",
275 |             "-webkit-border-image-width",
276 |             "-moz-border-image-width",
277 |             "-o-border-image-width",
278 |             "border-image-width",
279 |             "-webkit-border-image-outset",
280 |             "-moz-border-image-outset",
281 |             "-o-border-image-outset",
282 |             "border-image-outset",
283 |             "-webkit-border-image-repeat",
284 |             "-moz-border-image-repeat",
285 |             "-o-border-image-repeat",
286 |             "border-image-repeat",
287 |             "outline",
288 |             "outline-width",
289 |             "outline-style",
290 |             "outline-color",
291 |             "outline-offset",
292 |             "background",
293 |             "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader",
294 |             "background-color",
295 |             "background-image",
296 |             "background-repeat",
297 |             "background-attachment",
298 |             "background-position",
299 |             "background-position-x",
300 |             "-ms-background-position-x",
301 |             "background-position-y",
302 |             "-ms-background-position-y",
303 |             "-webkit-background-clip",
304 |             "-moz-background-clip",
305 |             "background-clip",
306 |             "background-origin",
307 |             "-webkit-background-size",
308 |             "-moz-background-size",
309 |             "-o-background-size",
310 |             "background-size",
311 |             "box-decoration-break",
312 |             "-webkit-box-shadow",
313 |             "-moz-box-shadow",
314 |             "box-shadow",
315 |             "filter:progid:DXImageTransform.Microsoft.gradient",
316 |             "-ms-filter:\\'progid:DXImageTransform.Microsoft.gradient",
317 |             "text-shadow"
318 |         ],
319 |         [
320 |             "font",
321 |             "font-family",
322 |             "font-size",
323 |             "font-weight",
324 |             "font-style",
325 |             "font-variant",
326 |             "font-size-adjust",
327 |             "font-stretch",
328 |             "font-effect",
329 |             "font-emphasize",
330 |             "font-emphasize-position",
331 |             "font-emphasize-style",
332 |             "font-smooth",
333 |             "line-height"
334 |         ]
335 |     ]
336 | }
337 | 


--------------------------------------------------------------------------------