.shiny{-webkit-perspective:500px;perspective:500px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;display:inline-block}.shiny button{background:#d1703c;color:#fff;font-size:14px;border:none;border-radius:0.5em;height:3em;padding:0 1em;position:relative;overflow:hidden;line-height:2em;-webkit-transition:all 0.5s cubic-bezier(0.67, -0.51, 0.42, 1.43);transition:all 0.5s cubic-bezier(0.67, -0.51, 0.42, 1.43)}.shiny button:hover,.shiny button:focus{border-color:#d1703c;color:#fff;font-size:24px}.shiny button:hover::after,.shiny button:focus::after,.shiny .demo-container.active button::after{-webkit-animation:sheen 1s 0.5s forwards;animation:sheen 1s 0.5s forwards}.shiny button::after{content:'';position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;background:-webkit-gradient(linear, left top, left bottom, from(rgba(209,112,60,0)), color-stop(50%, rgba(255,255,255,0.5)), to(rgba(209,112,60,0)));background:linear-gradient(to bottom, rgba(209,112,60,0), rgba(255,255,255,0.5) 50%, rgba(209,112,60,0));-webkit-transform:rotateZ(60deg) translate(-5em, 7.5em);transform:rotateZ(60deg) translate(-5em, 7.5em)}.shiny button.visible{overflow:visible}.shiny button:hover{cursor:pointer}@-webkit-keyframes sheen{100%{-webkit-transform:rotateZ(60deg) translate(1em, -14em);transform:rotateZ(60deg) translate(1em, -14em)}}@keyframes sheen{100%{-webkit-transform:rotateZ(60deg) translate(1em, -14em);transform:rotateZ(60deg) translate(1em, -14em)}}.demo-container.baymax-container{background:radial-gradient(circle at center, #fff, #fff 50%, #efefef);background-size:100%;background-repeat:no-repeat;max-width:22em;margin:2em 0 !important;height:10em;position:relative}.baymax{border-bottom:0.5em solid #000;position:absolute;top:50%;left:50%;width:55%;-webkit-transform:translate(-50%, -40%);transform:translate(-50%, -40%)}.baymax::before{-webkit-animation:blink 6s infinite;animation:blink 6s infinite;content:"";background:#000;background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), color-stop(50%, #fafafa), color-stop(50%, #000), to(#000));background:linear-gradient(to bottom, #fafafa, #fafafa 50%, #000 50%, #000);background-size:200%;background-position:0 -100%;border-radius:50%;position:absolute;width:4em;height:4em;left:-2.5em;top:-2.25em;-webkit-transform:skewX(-4deg);transform:skewX(-4deg)}.baymax::after{-webkit-animation:blink 6s 0.1s infinite;animation:blink 6s 0.1s infinite;content:"";background:#000;background:-webkit-gradient(linear, left top, left bottom, from(#fafafa), color-stop(50%, #fafafa), color-stop(50%, #000), to(#000));background:linear-gradient(to bottom, #fafafa, #fafafa 50%, #000 50%, #000);background-size:200%;background-position:0 -100%;border-radius:50%;position:absolute;width:4em;height:4em;right:-2.5em;top:-2.25em;-webkit-transform:skewX(4deg);transform:skewX(4deg)}.baymax.no-pseudo-elements::before,.baymax.no-pseudo-elements::after{display:none}.baymax.no-animation::before,.baymax.no-animation::after{-webkit-animation:none;animation:none}@-webkit-keyframes blink{0%,50%{background-position:0 -100%}85%,95%{background-position:0 -125%}100%{background-position:0 -100%}}@keyframes blink{0%,50%{background-position:0 -100%}85%,95%{background-position:0 -125%}100%{background-position:0 -100%}}.demo-container{margin:1em 0 !important}.post-header{position:relative;width:100%}.post-header .transition-label{font-size:1.5em;position:absolute;left:0;right:0;bottom:4em;text-align:center;background:none;color:rgba(255,255,255,0.8);opacity:0}.post-header .label1{-webkit-animation:showLabel1 6s infinite linear;animation:showLabel1 6s infinite linear}.post-header .label2{-webkit-animation:showLabel2 6s infinite linear;animation:showLabel2 6s infinite linear}@-webkit-keyframes showLabel1{0%,20%{opacity:1;-webkit-transform:none;transform:none}25%,75%{opacity:0;-webkit-transform:translate(-2em);transform:translate(-2em)}80%,100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes showLabel1{0%,20%{opacity:1;-webkit-transform:none;transform:none}25%,75%{opacity:0;-webkit-transform:translate(-2em);transform:translate(-2em)}80%,100%{opacity:1;-webkit-transform:none;transform:none}}@-webkit-keyframes showLabel2{0%,20%{opacity:0;-webkit-transform:translate(-2em);transform:translate(-2em)}25%,75%{opacity:1;-webkit-transform:none;transform:none}80%,100%{opacity:0;-webkit-transform:translate(-2em);transform:translate(-2em)}}@keyframes showLabel2{0%,20%{opacity:0;-webkit-transform:translate(-2em);transform:translate(-2em)}25%,75%{opacity:1;-webkit-transform:none;transform:none}80%,100%{opacity:0;-webkit-transform:translate(-2em);transform:translate(-2em)}}.shape{-webkit-animation:shape-change 6s infinite cubic-bezier(0.63, -0.52, 0.31, 1.37);animation:shape-change 6s infinite cubic-bezier(0.63, -0.52, 0.31, 1.37);border:1em solid white;background:#2d97db;position:absolute;left:calc(50% - 3em);top:calc(50% - 3em);height:4em;width:4em;-webkit-transform-origin:50% 200%;transform-origin:50% 200%}@-webkit-keyframes shape-change{0%{-webkit-transform:none;transform:none}10%,40%{-webkit-transform:none;transform:none;width:10em;left:calc(50% - 6em)}45%{width:4em;-webkit-transform:translate(-2em);transform:translate(-2em);left:calc(50% - 3em)}47%{-webkit-transform:translate(2em) rotateZ(-6deg);transform:translate(2em) rotateZ(-6deg)}49%{-webkit-transform:translate(-2em) rotateZ(7deg);transform:translate(-2em) rotateZ(7deg)}51%{-webkit-transform:translate(2em) rotateZ(-4deg);transform:translate(2em) rotateZ(-4deg)}55%{-webkit-transform:translate(-2em) rotateZ(5deg);transform:translate(-2em) rotateZ(5deg)}57.5%{-webkit-transform:translate(2em) rotateZ(-20deg);transform:translate(2em) rotateZ(-20deg)}60%{-webkit-transform:translate(-2em) rotateZ(20deg);transform:translate(-2em) rotateZ(20deg)}65%,100%{-webkit-transform:none;transform:none}}@keyframes shape-change{0%{-webkit-transform:none;transform:none}10%,40%{-webkit-transform:none;transform:none;width:10em;left:calc(50% - 6em)}45%{width:4em;-webkit-transform:translate(-2em);transform:translate(-2em);left:calc(50% - 3em)}47%{-webkit-transform:translate(2em) rotateZ(-6deg);transform:translate(2em) rotateZ(-6deg)}49%{-webkit-transform:translate(-2em) rotateZ(7deg);transform:translate(-2em) rotateZ(7deg)}51%{-webkit-transform:translate(2em) rotateZ(-4deg);transform:translate(2em) rotateZ(-4deg)}55%{-webkit-transform:translate(-2em) rotateZ(5deg);transform:translate(-2em) rotateZ(5deg)}57.5%{-webkit-transform:translate(2em) rotateZ(-20deg);transform:translate(2em) rotateZ(-20deg)}60%{-webkit-transform:translate(-2em) rotateZ(20deg);transform:translate(-2em) rotateZ(20deg)}65%,100%{-webkit-transform:none;transform:none}}.demo-container.clocks{background:rgba(200,200,200,0.9);padding:4em 0 2em 1em}@media (max-width: 550px){.demo-container.clocks{font-size:12px;width:100%}}.demo-container.clocks.single{padding:2em;display:inline-block}.demo-container.clocks.single .clock{height:20em;width:20em;padding:0;margin:0}@media (max-width: 550px){.demo-container.clocks.single .clock{font-size:12px}}@media (max-width: 420px){.demo-container.clocks.single .clock{font-size:10px}}.clock{border-radius:50%;background:radial-gradient(#000, #000 0.1em, #fff 0.1em, #fff),#fff;display:inline-block;padding-bottom:31.333%;position:relative;width:31.333%;opacity:0}.multiple .clock{left:auto}.clock.show{opacity:1;-webkit-transition:all 2.5s cubic-bezier(0.12, 1.03, 0.34, 1);transition:all 2.5s cubic-bezier(0.12, 1.03, 0.34, 1)}.multiple .clock.show{-webkit-transform:none;transform:none}.clock::after{background:red;border-radius:50%;content:"";position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:4%;height:4%;z-index:10}.minutes-container,.hours-container,.seconds-container{position:absolute;top:0;right:0;bottom:0;left:0}.hours-container{-webkit-animation:rotate 43200s infinite linear;animation:rotate 43200s infinite linear}.linear .minutes-container{-webkit-animation:rotate 3600s infinite linear;animation:rotate 3600s infinite linear}.linear .seconds-container{-webkit-animation:rotate 60s infinite linear;animation:rotate 60s infinite linear}.steps .minutes-container{-webkit-animation:rotate 3600s infinite steps(60);animation:rotate 3600s infinite steps(60)}.steps .seconds-container{-webkit-animation:rotate 60s infinite steps(60);animation:rotate 60s infinite steps(60)}.local.steps .minutes-container{-webkit-animation:none;animation:none}.bounce .minutes-container{-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44);transition:-webkit-transform 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44);transition:transform 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44);transition:transform 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44), -webkit-transform 0.3s cubic-bezier(0.4, 2.08, 0.55, 0.44)}.bounce .seconds-container{-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);transition:-webkit-transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);transition:transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44);transition:transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44), -webkit-transform 0.2s cubic-bezier(0.4, 2.08, 0.55, 0.44)}.hours{background:#000;width:3.5%;height:40%;position:absolute;left:48.25%;top:22%;-webkit-transform-origin:50% 71%;transform-origin:50% 71%}.minutes{background:#000;width:3.5%;height:55%;position:absolute;left:48.25%;top:7%;-webkit-transform-origin:50% 78.5%;transform-origin:50% 78.5%}.seconds{background:red;width:1.5%;height:42%;position:absolute;left:49.25%;top:20%;-webkit-transform-origin:50% 71%;transform-origin:50% 71%;z-index:8}.label{background:#fff;border-radius:0.25em;color:#000;font-family:MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;font-size:0.5em;font-weight:bold;text-transform:uppercase;padding:0.5em 0.75em 0.25em;position:absolute;top:-4em;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}@-webkit-keyframes rotate{100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@keyframes rotate{100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}.clock.station{background:#fff url(/prx/000/https/cssanimation.rocks/images/posts/clocks/station_clock.svg) no-repeat center;background-size:95%;-webkit-box-shadow:0 0 0.5em rgba(0,0,0,0.2) inset;box-shadow:0 0 0.5em rgba(0,0,0,0.2) inset}.clock.station .seconds::before{background:red;border-radius:50%;content:"";position:absolute;top:-9%;left:-200%;height:18%;width:500%}.clock.ios7{background:#fff url(/prx/000/https/cssanimation.rocks/images/posts/clocks/ios_clock.svg) no-repeat center;background-size:88%}.clock.ios7:before{background:black;border-radius:50%;content:"";position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:6%;height:6%;z-index:0}.clock.ios7:after{width:2%;height:2%}.clock.ios7 .seconds{border-radius:200%/10%;height:30%;left:49.5%;top:20%;width:1%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.clock.ios7 .minutes{border-radius:150%/10%;width:2%;height:35%;left:49%;top:15%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.clock.ios7 .hours{border-radius:85%/10%;width:2%;height:20%;left:49%;top:30%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.clock.simple{background:#fff url(/prx/000/https/cssanimation.rocks/images/posts/clocks/ios_clock.svg) no-repeat center;background-size:88%}.clock.simple:after{background-color:#000;width:5%;height:5%}.clock.simple .seconds{background-color:#000;height:45%;left:49.5%;top:14%;width:1%;-webkit-transform-origin:50% 80%;transform-origin:50% 80%}.clock.simple .minutes{width:2%;height:40%;left:49%;top:10%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.clock.simple .hours{width:2.5%;height:20%;left:48.75%;top:30%;-webkit-transform-origin:50% 100%;transform-origin:50% 100%}.hours.angled{-webkit-transform:rotateZ(-40deg);transform:rotateZ(-40deg)}.minutes.angled{-webkit-transform:rotateZ(40deg);transform:rotateZ(40deg)}.add-to-list{background:#fff;border-radius:0.5em;padding:1em 1em;display:inline-block;width:auto}.add-to-list li{list-style:none;background:#d1703c;border-bottom:0 solid #fff;color:#fff;height:0;padding:0 0.5em;margin:0;overflow:hidden;line-height:2em;width:10em}.add-to-list li:hover{cursor:crosshair}.add-to-list li.show{height:2em;border-width:2px}.add-to-list.fade li{-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;opacity:0;height:2em}.add-to-list.fade li.show{opacity:1}.add-to-list.slide-fade li{-webkit-transition:all 0.4s ease-out;transition:all 0.4s ease-out;opacity:0}.add-to-list.slide-fade li.show{opacity:1}.add-to-list.swing{-webkit-perspective:100px;perspective:100px}.add-to-list.swing li{opacity:0;-webkit-transform:rotateX(-90deg);transform:rotateX(-90deg);-webkit-transition:all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);transition:all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76)}.add-to-list.swing li.show{opacity:1;-webkit-transform:none;transform:none;-webkit-transition:all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);transition:all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76)}.add-to-list.swing-side{-webkit-perspective:200px;perspective:200px}.add-to-list.swing-side li{-webkit-transform:rotateY(-90deg);transform:rotateY(-90deg);-webkit-transition:all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);transition:all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76)}.add-to-list.swing-side li.show{opacity:1;-webkit-transform:none;transform:none;-webkit-transition:all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76);transition:all 0.5s cubic-bezier(0.36, -0.64, 0.34, 1.76)}