.example{display:-ms-grid;display:grid;margin-bottom:90px}.example p{margin:auto;text-align:center;font-weight:700;line-height:1.2;font-size:2em}@media (min-width:768px){.example p{font-size:3em}}.example-1{width:100%;min-height:400px;background-color:#fff;background-image:linear-gradient(-45deg,#f0f,#00f,#0f0);background-size:400% 400%;-webkit-animation:5s infinite gradient-example-1;animation:5s infinite gradient-example-1}@-webkit-keyframes gradient-example-1{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@keyframes gradient-example-1{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.example-2{width:100%;min-height:400px;background:radial-gradient(ellipse at center,#ff2f2f,#6c0000);-webkit-animation:2s linear infinite pulse-example-2;animation:2s linear infinite pulse-example-2}@-webkit-keyframes pulse-example-2{0%,to{-webkit-transform:scale(.9);transform:scale(.9);opacity:.7}50%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes pulse-example-2{0%,to{-webkit-transform:scale(.9);transform:scale(.9);opacity:.7}50%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}.example-3{width:100%;min-height:400px;background:linear-gradient(-45deg,#d4145a,#fbb03b,#ff5e3a);background-size:400% 400%;-webkit-animation:8s infinite gradient-example-3;animation:8s infinite gradient-example-3}@-webkit-keyframes gradient-example-3{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@keyframes gradient-example-3{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.example-4{width:100%;min-height:400px;position:relative;background:linear-gradient(-45deg,#ff5f6d,#ffc371,#ff5f6d,#ffc371);background-size:400% 400%;-webkit-animation:10s infinite gradient-example-4;animation:10s infinite gradient-example-4}.example-4 p{color:#fff;text-shadow:2px 2px 4px #000;-webkit-animation:2s ease-in-out infinite alternate glow-example-4;animation:2s ease-in-out infinite alternate glow-example-4}@-webkit-keyframes gradient-example-4{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@keyframes gradient-example-4{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@-webkit-keyframes glow-example-4{0%{text-shadow:2px 2px 4px #000}to{text-shadow:0 0 20px red,0 0 30px red,0 0 40px red,0 0 50px red}}@keyframes glow-example-4{0%{text-shadow:2px 2px 4px #000}to{text-shadow:0 0 20px red,0 0 30px red,0 0 40px red,0 0 50px red}}.example-5{width:100%;min-height:400px;background:-webkit-gradient(linear,left top,right top,from(#64b5f6),color-stop(#e57373),color-stop(#fbc02d),to(#4db6ac));background:linear-gradient(to right,#64b5f6,#e57373,#fbc02d,#4db6ac);background-size:400% 400%;-webkit-animation:10s infinite gradient-example-5;animation:10s infinite gradient-example-5;position:relative}.example-5 p{color:#fff;text-shadow:2px 2px 4px #000;-webkit-animation:5s infinite alternate dropshadow-example-5;animation:5s infinite alternate dropshadow-example-5}@-webkit-keyframes gradient-example-5{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@keyframes gradient-example-5{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@-webkit-keyframes dropshadow-example-5{0%,to{text-shadow:2px 2px 4px #000}50%{text-shadow:6px 6px 10px #000}}@keyframes dropshadow-example-5{0%,to{text-shadow:2px 2px 4px #000}50%{text-shadow:6px 6px 10px #000}}.example-6{max-width:80%;min-height:400px;background:radial-gradient(circle,#a9a9a9,#000);-webkit-animation:4s ease-in-out infinite pulsate-example-6;animation:4s ease-in-out infinite pulsate-example-6;position:relative;margin:90px auto}.example-6 p{color:#fff;text-shadow:2px 2px 4px #000}@-webkit-keyframes pulsate-example-6{0%,to{-webkit-transform:scale(1);transform:scale(1);opacity:.5}50%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:.7}}@keyframes pulsate-example-6{0%,to{-webkit-transform:scale(1);transform:scale(1);opacity:.5}50%{-webkit-transform:scale(1.2);transform:scale(1.2);opacity:.7}}.example-7{min-height:400px;background-color:#000;background-image:url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/bg-hero-mobile.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;-webkit-animation:10s linear infinite background-anim-example-7;animation:10s linear infinite background-anim-example-7;position:relative}@media (min-width:768px){.example-7{background-image:url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/bg-hero.png)}}.example-7 p{color:#fff;text-shadow:2px 2px 4px #000}@-webkit-keyframes background-anim-example-7{0%,to{background-size:120%auto;-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}50%{background-size:100%auto;-webkit-filter:hue-rotate(90deg);filter:hue-rotate(90deg)}}@keyframes background-anim-example-7{0%,to{background-size:120%auto;-webkit-filter:hue-rotate(0deg);filter:hue-rotate(0deg)}50%{background-size:100%auto;-webkit-filter:hue-rotate(90deg);filter:hue-rotate(90deg)}}.example-8{min-height:400px;background-image:url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup-four.jpg);background-position:center;background-repeat:no-repeat;background-size:cover;-webkit-animation:10s linear infinite background-anim-example-8;animation:10s linear infinite background-anim-example-8;position:relative}.example-8 p{color:#fff;text-shadow:2px 2px 4px #000}@-webkit-keyframes background-anim-example-8{0%{background-position:center;-webkit-filter:blur(0);filter:blur(0)}50%{background-position:left top;-webkit-filter:blur(5px);filter:blur(5px)}to{background-position:right bottom;-webkit-filter:blur(0);filter:blur(0)}}@keyframes background-anim-example-8{0%{background-position:center;-webkit-filter:blur(0);filter:blur(0)}50%{background-position:left top;-webkit-filter:blur(5px);filter:blur(5px)}to{background-position:right bottom;-webkit-filter:blur(0);filter:blur(0)}}.example-9{width:100%;min-height:400px;position:relative;background:linear-gradient(45deg,#ff8a00,#e52e71),linear-gradient(-45deg,#ffc900,#ff3838),linear-gradient(135deg,#8e2de2,#4a00e0),linear-gradient(-135deg,#08cde9,#006ba1);background-size:400% 400%;-webkit-animation:1s ease-in-out infinite background-anim-example-9;animation:1s ease-in-out infinite background-anim-example-9}.example-9 p{color:#fff;text-shadow:2px 2px 4px #000}@-webkit-keyframes background-anim-example-9{0%,to{background-position:0 50%}50%{background-position:100% 50%}}@keyframes background-anim-example-9{0%,to{background-position:0 50%}50%{background-position:100% 50%}}.example-10{width:100%;min-height:400px;position:relative;background-image:url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup.jpg);background-size:cover;-webkit-animation:20s linear infinite background-anim-example-10;animation:20s linear infinite background-anim-example-10}.example-10 p{color:#fff;text-shadow:2px 2px 4px #000}@-webkit-keyframes background-anim-example-10{0%,to{background-position:0 0}50%{background-position:100% 100%}}@keyframes background-anim-example-10{0%,to{background-position:0 0}50%{background-position:100% 100%}}.example-11{width:100%;min-height:400px;position:relative;background-image:url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup-two.jpg);background-position:center;background-repeat:no-repeat;-webkit-animation:20s ease-in-out infinite background-anim-example-11;animation:20s ease-in-out infinite background-anim-example-11}.example-11 p{color:#fff;text-shadow:2px 2px 4px #000}@-webkit-keyframes background-anim-example-11{0%,to{background-position:0 0}50%{background-position:100%0}}@keyframes background-anim-example-11{0%,to{background-position:0 0}50%{background-position:100%0}}.example-12 .animated-rectangle,.example-12:before{height:100%;width:100%;position:absolute;top:0;left:0}.example-12{min-height:400px;position:relative;overflow:hidden}.example-12:before{content:"";background:url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup-three.jpg)center/cover no-repeat fixed;z-index:-1;-webkit-animation:5s linear infinite slide-example-12;animation:5s linear infinite slide-example-12}.example-12 .animated-rectangle{background:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),color-stop(50%,rgba(0,0,0,.8)),to(rgba(0,0,0,.5)));background:linear-gradient(to right,#00000080 0,#000c,#00000080);-webkit-animation:5s linear infinite rectangle-anim-example-12;animation:5s linear infinite rectangle-anim-example-12}.example-12 p{color:#fff;text-shadow:2px 2px 4px #000;z-index:1}@-webkit-keyframes rectangle-anim-example-12{0%{-webkit-transform:translateX(-100%);transform:translate(-100%)}to{-webkit-transform:translateX(100%);transform:translate(100%)}}@keyframes rectangle-anim-example-12{0%{-webkit-transform:translateX(-100%);transform:translate(-100%)}to{-webkit-transform:translateX(100%);transform:translate(100%)}}@-webkit-keyframes slide-example-12{0%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);transform:scale(1)}}@keyframes slide-example-12{0%{-webkit-transform:scale(1.2);transform:scale(1.2)}to{-webkit-transform:scale(1);transform:scale(1)}}.example-13{min-height:400px;background-color:#4285f4;-webkit-animation:5s ease-in-out infinite background-animation-example-13;animation:5s ease-in-out infinite background-animation-example-13}.example-13 p{color:#fff}@-webkit-keyframes background-animation-example-13{0%{background-color:#4285f4}50%{background-color:#ea4335}to{background-color:#fbbc05}}@keyframes background-animation-example-13{0%{background-color:#4285f4}50%{background-color:#ea4335}to{background-color:#fbbc05}}.example-14{min-height:400px;background-color:#4285f4;-webkit-animation:10s ease-in-out infinite background-animation-example-14;animation:10s ease-in-out infinite background-animation-example-14}.example-14 p{color:#fff;text-shadow:1px 1px 2px #000}@-webkit-keyframes background-animation-example-14{0%{background:-webkit-gradient(linear,left bottom,left top,from(rgba(14,5,81,.7))),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup.jpg)no-repeat;background:linear-gradient(0deg,#0e0551b3),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup.jpg)no-repeat}30%{background:-webkit-gradient(linear,left bottom,left top,from(rgba(87,1,1,.7))),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup-two.jpg)no-repeat;background:linear-gradient(0deg,#570101b3),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup-two.jpg)no-repeat}60%{background:-webkit-gradient(linear,left bottom,left top,from(rgba(1,54,17,.5))),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup-three.jpg)no-repeat;background:linear-gradient(0deg,#01361180),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup-three.jpg)no-repeat}to{background:-webkit-gradient(linear,left bottom,left top,from(rgba(87,2,82,.6))),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup.jpg)no-repeat;background:linear-gradient(0deg,#57025299),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup.jpg)no-repeat}}@keyframes background-animation-example-14{0%{background:-webkit-gradient(linear,left bottom,left top,from(rgba(14,5,81,.7))),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup.jpg)no-repeat;background:linear-gradient(0deg,#0e0551b3),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup.jpg)no-repeat}30%{background:-webkit-gradient(linear,left bottom,left top,from(rgba(87,1,1,.7))),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup-two.jpg)no-repeat;background:linear-gradient(0deg,#570101b3),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup-two.jpg)no-repeat}60%{background:-webkit-gradient(linear,left bottom,left top,from(rgba(1,54,17,.5))),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup-three.jpg)no-repeat;background:linear-gradient(0deg,#01361180),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup-three.jpg)no-repeat}to{background:-webkit-gradient(linear,left bottom,left top,from(rgba(87,2,82,.6))),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup.jpg)no-repeat;background:linear-gradient(0deg,#57025299),url(https://raw.githubusercontent.com/shihabiiuc/css-animated-background/master/img/isometric-mockup.jpg)no-repeat}}