├── .gitignore ├── Makefile ├── README.md ├── package.json ├── public ├── 0.intro │ ├── css │ │ └── style.css │ └── index.html ├── 1.our-first-animation │ ├── css │ │ └── style.css │ └── index.html ├── 10.walk-sign-with-animation-fill-mode │ ├── css │ │ └── style.css │ └── index.html ├── 11.clapper-board-with-animation-direction │ ├── css │ │ └── style.css │ └── index.html ├── 12.basic-chaining-with-shorthand │ ├── css │ │ └── style.css │ └── index.html ├── 13.dynamic-animations-with-css-variables │ ├── css │ │ └── style.css │ └── index.html ├── 14.changing-css-animation-with-css-variables │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ └── index.js ├── 15.animating-curved-motion-path │ ├── css │ │ └── style.css │ └── index.html ├── 16.spin-counter-with-animationiteration │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ └── index.js ├── 17.dynamic-delays-with-animationend │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ └── index.js ├── 18.worm-loader-with-curved-path │ ├── css │ │ └── style.css │ └── index.html ├── 19.animation-delay-demo │ ├── css │ │ └── style.css │ ├── index.html │ └── js │ │ └── index.js ├── 2.square-path-keyframes │ ├── css │ │ └── style.css │ └── index.html ├── 20.sibling-squares │ ├── css │ │ └── style.css │ └── index.html ├── 21.no-curved-path │ ├── css │ │ └── style.css │ └── index.html ├── 22.no-fill-mode │ ├── css │ │ └── style.css │ └── index.html ├── 23.no-persistent-shrinking │ ├── css │ │ └── style.css │ └── index.html ├── 3.adjusting-iteration-count │ ├── css │ │ └── style.css │ └── index.html ├── 4.animation-timing-function-effects │ ├── css │ │ └── style.css │ └── index.html ├── 5.linear-spinning-square │ ├── css │ │ └── style.css │ └── index.html ├── 6.toggling-animation-play-state │ ├── css │ │ └── style.css │ └── index.html ├── 7.staggered-spins-with-animation-delay │ ├── css │ │ └── style.css │ └── index.html ├── 8.shrinking-element-with-animation-fill-mode │ ├── css │ │ └── style.css │ └── index.html ├── 9.staggered-fade-with-animation-fill-mode │ ├── css │ │ └── style.css │ └── index.html └── index.html └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/.gitignore -------------------------------------------------------------------------------- /Makefile: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/Makefile -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/README.md -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/package.json -------------------------------------------------------------------------------- /public/0.intro/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/0.intro/css/style.css -------------------------------------------------------------------------------- /public/0.intro/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/0.intro/index.html -------------------------------------------------------------------------------- /public/1.our-first-animation/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/1.our-first-animation/css/style.css -------------------------------------------------------------------------------- /public/1.our-first-animation/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/1.our-first-animation/index.html -------------------------------------------------------------------------------- /public/10.walk-sign-with-animation-fill-mode/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/10.walk-sign-with-animation-fill-mode/css/style.css -------------------------------------------------------------------------------- /public/10.walk-sign-with-animation-fill-mode/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/10.walk-sign-with-animation-fill-mode/index.html -------------------------------------------------------------------------------- /public/11.clapper-board-with-animation-direction/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/11.clapper-board-with-animation-direction/css/style.css -------------------------------------------------------------------------------- /public/11.clapper-board-with-animation-direction/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/11.clapper-board-with-animation-direction/index.html -------------------------------------------------------------------------------- /public/12.basic-chaining-with-shorthand/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/12.basic-chaining-with-shorthand/css/style.css -------------------------------------------------------------------------------- /public/12.basic-chaining-with-shorthand/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/12.basic-chaining-with-shorthand/index.html -------------------------------------------------------------------------------- /public/13.dynamic-animations-with-css-variables/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/13.dynamic-animations-with-css-variables/css/style.css -------------------------------------------------------------------------------- /public/13.dynamic-animations-with-css-variables/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/13.dynamic-animations-with-css-variables/index.html -------------------------------------------------------------------------------- /public/14.changing-css-animation-with-css-variables/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/14.changing-css-animation-with-css-variables/css/style.css -------------------------------------------------------------------------------- /public/14.changing-css-animation-with-css-variables/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/14.changing-css-animation-with-css-variables/index.html -------------------------------------------------------------------------------- /public/14.changing-css-animation-with-css-variables/js/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/14.changing-css-animation-with-css-variables/js/index.js -------------------------------------------------------------------------------- /public/15.animating-curved-motion-path/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/15.animating-curved-motion-path/css/style.css -------------------------------------------------------------------------------- /public/15.animating-curved-motion-path/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/15.animating-curved-motion-path/index.html -------------------------------------------------------------------------------- /public/16.spin-counter-with-animationiteration/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/16.spin-counter-with-animationiteration/css/style.css -------------------------------------------------------------------------------- /public/16.spin-counter-with-animationiteration/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/16.spin-counter-with-animationiteration/index.html -------------------------------------------------------------------------------- /public/16.spin-counter-with-animationiteration/js/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/16.spin-counter-with-animationiteration/js/index.js -------------------------------------------------------------------------------- /public/17.dynamic-delays-with-animationend/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/17.dynamic-delays-with-animationend/css/style.css -------------------------------------------------------------------------------- /public/17.dynamic-delays-with-animationend/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/17.dynamic-delays-with-animationend/index.html -------------------------------------------------------------------------------- /public/17.dynamic-delays-with-animationend/js/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/17.dynamic-delays-with-animationend/js/index.js -------------------------------------------------------------------------------- /public/18.worm-loader-with-curved-path/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/18.worm-loader-with-curved-path/css/style.css -------------------------------------------------------------------------------- /public/18.worm-loader-with-curved-path/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/18.worm-loader-with-curved-path/index.html -------------------------------------------------------------------------------- /public/19.animation-delay-demo/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/19.animation-delay-demo/css/style.css -------------------------------------------------------------------------------- /public/19.animation-delay-demo/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/19.animation-delay-demo/index.html -------------------------------------------------------------------------------- /public/19.animation-delay-demo/js/index.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/19.animation-delay-demo/js/index.js -------------------------------------------------------------------------------- /public/2.square-path-keyframes/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/2.square-path-keyframes/css/style.css -------------------------------------------------------------------------------- /public/2.square-path-keyframes/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/2.square-path-keyframes/index.html -------------------------------------------------------------------------------- /public/20.sibling-squares/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/20.sibling-squares/css/style.css -------------------------------------------------------------------------------- /public/20.sibling-squares/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/20.sibling-squares/index.html -------------------------------------------------------------------------------- /public/21.no-curved-path/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/21.no-curved-path/css/style.css -------------------------------------------------------------------------------- /public/21.no-curved-path/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/21.no-curved-path/index.html -------------------------------------------------------------------------------- /public/22.no-fill-mode/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/22.no-fill-mode/css/style.css -------------------------------------------------------------------------------- /public/22.no-fill-mode/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/22.no-fill-mode/index.html -------------------------------------------------------------------------------- /public/23.no-persistent-shrinking/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/23.no-persistent-shrinking/css/style.css -------------------------------------------------------------------------------- /public/23.no-persistent-shrinking/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/23.no-persistent-shrinking/index.html -------------------------------------------------------------------------------- /public/3.adjusting-iteration-count/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/3.adjusting-iteration-count/css/style.css -------------------------------------------------------------------------------- /public/3.adjusting-iteration-count/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/3.adjusting-iteration-count/index.html -------------------------------------------------------------------------------- /public/4.animation-timing-function-effects/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/4.animation-timing-function-effects/css/style.css -------------------------------------------------------------------------------- /public/4.animation-timing-function-effects/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/4.animation-timing-function-effects/index.html -------------------------------------------------------------------------------- /public/5.linear-spinning-square/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/5.linear-spinning-square/css/style.css -------------------------------------------------------------------------------- /public/5.linear-spinning-square/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/5.linear-spinning-square/index.html -------------------------------------------------------------------------------- /public/6.toggling-animation-play-state/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/6.toggling-animation-play-state/css/style.css -------------------------------------------------------------------------------- /public/6.toggling-animation-play-state/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/6.toggling-animation-play-state/index.html -------------------------------------------------------------------------------- /public/7.staggered-spins-with-animation-delay/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/7.staggered-spins-with-animation-delay/css/style.css -------------------------------------------------------------------------------- /public/7.staggered-spins-with-animation-delay/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/7.staggered-spins-with-animation-delay/index.html -------------------------------------------------------------------------------- /public/8.shrinking-element-with-animation-fill-mode/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/8.shrinking-element-with-animation-fill-mode/css/style.css -------------------------------------------------------------------------------- /public/8.shrinking-element-with-animation-fill-mode/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/8.shrinking-element-with-animation-fill-mode/index.html -------------------------------------------------------------------------------- /public/9.staggered-fade-with-animation-fill-mode/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/9.staggered-fade-with-animation-fill-mode/css/style.css -------------------------------------------------------------------------------- /public/9.staggered-fade-with-animation-fill-mode/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/9.staggered-fade-with-animation-fill-mode/index.html -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/public/index.html -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jh3y/a-guide-to-css-animation/HEAD/yarn.lock --------------------------------------------------------------------------------