.post-header{background:#000;-webkit-perspective:800px;perspective:800px}.post-header a{color:#fff}.demo-container.watch-container{background:#fff;padding:1em 1.5em 2.75em 1em}@-webkit-keyframes show-title{0%{-webkit-transform:translateY(0.25em);transform:translateY(0.25em);opacity:0}10%,95%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(0.25em);transform:translateY(0.25em);opacity:0}}@keyframes show-title{0%{-webkit-transform:translateY(0.25em);transform:translateY(0.25em);opacity:0}10%,95%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}100%{-webkit-transform:translateY(0.25em);transform:translateY(0.25em);opacity:0}}@-webkit-keyframes show-dials{0%,8%{opacity:0;-webkit-transform:translateY(0.25em);transform:translateY(0.25em)}15%,93%{opacity:1;-webkit-transform:none;transform:none}100%{opacity:0;-webkit-transform:translateY(0.25em);transform:translateY(0.25em)}}@keyframes show-dials{0%,8%{opacity:0;-webkit-transform:translateY(0.25em);transform:translateY(0.25em)}15%,93%{opacity:1;-webkit-transform:none;transform:none}100%{opacity:0;-webkit-transform:translateY(0.25em);transform:translateY(0.25em)}}.watch{background:url(/prx/000/https/cssanimation.rocks/images/posts/watch/watchbg.jpg) no-repeat;background-size:100%;font-family:"San Francisco Display UltraLight", "Open Sans", Helvetica, Arial, Serif;font-size:16px;width:220px;height:244px;position:relative}.demo .watch{background:none;position:absolute;font-size:32px;top:50%;left:50%;height:432px;width:390px;-webkit-transform:translate(-50%, -50%) rotateX(55deg) rotateZ(-25deg) rotateY(-15deg) scale(2.5);transform:translate(-50%, -50%) rotateX(55deg) rotateZ(-25deg) rotateY(-15deg) scale(2.5)}.demo .watch .pips{display:none}@media (max-width: 550px){.demo .watch{font-size:16px;height:216px;width:195px}}@media (max-width: 420px){.demo .watch{font-size:12px;height:162px;width:146px}}.screen{width:59.2%;height:74%;position:absolute;left:18%;top:13%}.screen .title,.screen .time{-webkit-animation:show-title 5s infinite ease-out;animation:show-title 5s infinite ease-out;color:#b1b4c2;font-size:0.9em;position:absolute;top:0;left:0;letter-spacing:0.05em}.screen .time{-webkit-animation-delay:0.2s;animation-delay:0.2s;right:0;left:auto}.screen .dials{-webkit-animation:show-dials 5s infinite ease-out;animation:show-dials 5s infinite ease-out;width:4em;height:4em;border-radius:50%;position:absolute;top:1.75em;left:0}.screen .dial{border:1px solid #000;border-radius:50%}.screen .dial.move{position:absolute;width:8em;height:8em}.screen .dial.move::before{background:url(/prx/000/https/cssanimation.rocks/images/posts/watch/1.png) no-repeat center;background-size:50%;content:"";width:1.5em;height:1.5em;position:absolute;top:-0.35em;left:calc(50% - 0.75em);z-index:10}.screen .dial.move::after{content:"";background:#000;border-radius:50%;width:6em;height:6em;position:absolute;top:1em;left:1em}.screen .dial.move .dial-container{position:absolute;top:0;bottom:0;width:4em;overflow:hidden}.screen .dial.move .wedge{width:4em;height:8em;position:absolute;top:0;left:0}.screen .dial.move .container1{left:4em}.screen .dial.move .container1 .wedge{-webkit-animation:rotate-bg-dial-1-1 5s 0.2s linear infinite;animation:rotate-bg-dial-1-1 5s 0.2s linear infinite;border-radius:8em 0 0 8em;background:#fc1d20;left:-4em;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.screen .dial.move .container2{left:0}.screen .dial.move .container2 .wedge{-webkit-animation:rotate-bg-dial-1-2 5s 0.2s linear infinite;animation:rotate-bg-dial-1-2 5s 0.2s linear infinite;background:#fc1d20;border-radius:0 8em 8em 0;-webkit-transform-origin:0 50%;transform-origin:0 50%;left:4em}.screen .dial.move .marker{width:1em;height:1em;background:#fc1d20;border-radius:50%;position:absolute;top:0;left:calc(50% - 0.5em)}.screen .dial.move .end{-webkit-animation:rotate-marker-dial-1 5s 0.2s linear infinite;animation:rotate-marker-dial-1 5s 0.2s linear infinite;-webkit-transform-origin:50% 4em;transform-origin:50% 4em}.screen .dial.exercise{position:absolute;width:6em;height:6em;top:1em;left:1em}.screen .dial.exercise::before{background:url(/prx/000/https/cssanimation.rocks/images/posts/watch/2.png) no-repeat center;background-size:50%;content:"";width:1.5em;height:1.5em;position:absolute;top:-0.35em;left:calc(50% - 0.75em);z-index:10}.screen .dial.exercise::after{content:"";background:#000;border-radius:50%;width:4em;height:4em;position:absolute;top:1em;left:1em}.screen .dial.exercise .dial-container{position:absolute;top:0;bottom:0;width:3em;overflow:hidden}.screen .dial.exercise .wedge{border-radius:50%;width:3em;height:6em;position:absolute}.screen .dial.exercise .container1{left:3em}.screen .dial.exercise .container1 .wedge{-webkit-animation:rotate-bg-dial-2-1 5s .5s linear infinite;animation:rotate-bg-dial-2-1 5s .5s linear infinite;border-radius:8em 0 0 8em;position:absolute;background:#9cfc33;left:-3em;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.screen .dial.exercise .marker{width:1em;height:1em;background:#9cfc33;border-radius:50%;position:absolute;top:0;left:calc(50% - 0.48em)}.screen .dial.exercise .end{-webkit-animation:rotate-marker-dial-2 5s .5s linear infinite;animation:rotate-marker-dial-2 5s .5s linear infinite;-webkit-transform-origin:45% 3em;transform-origin:45% 3em}.screen .dial.stand{position:absolute;width:4em;height:4em;top:2em;left:2em}.screen .dial.stand::before{background:url(/prx/000/https/cssanimation.rocks/images/posts/watch/3.png) no-repeat center;background-size:50%;content:"";width:1.5em;height:1.5em;position:absolute;top:-0.35em;left:calc(50% - 0.75em);z-index:10}.screen .dial.stand::after{content:"";background:#000;border-radius:50%;width:2em;height:2em;position:absolute;top:1em;left:1em}.screen .dial.stand .dial-container{position:absolute;top:0;bottom:0;width:4em;overflow:hidden}.screen .dial.stand .wedge{border-radius:50%;width:2em;height:4em;position:absolute}.screen .dial.stand .container1{left:2em}.screen .dial.stand .container1 .wedge{position:absolute;-webkit-animation:rotate-bg-dial-3-1 5s 0.5s linear infinite;animation:rotate-bg-dial-3-1 5s 0.5s linear infinite;background:#32cbd4;border-radius:8em 0 0 8em;left:-2em;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.screen .dial.stand .marker{width:1em;height:1em;background:#32cbd4;border-radius:50%;position:absolute;top:0;left:calc(50% - 0.5em)}.screen .dial.stand .end{-webkit-animation:rotate-marker-dial-3 5s 0.5s linear infinite;animation:rotate-marker-dial-3 5s 0.5s linear infinite;-webkit-transform-origin:50% 2em;transform-origin:50% 2em}.screen .dial-background{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%}.screen .dial-background.one{background:#400818}.screen .dial-background.two{background:#2d400c}.screen .dial-background.three{background:#163d3b}.pips{-webkit-animation:show-dials 5s 0.1s infinite ease-out;animation:show-dials 5s 0.1s infinite ease-out;position:absolute;bottom:0;left:calc(50% - 1em);width:2em}.pips div{width:0.25em;height:0.25em;background-color:#353535;border-radius:50%;display:inline-block;margin:0 0.02em}.pips div:first-child{background-color:#fff}@-webkit-keyframes rotate-marker-dial-1{0%,6%{-webkit-transform:none;transform:none}28%,94%{-webkit-transform:rotateZ(220deg);transform:rotateZ(220deg)}95%,100%{-webkit-transform:none;transform:none}}@keyframes rotate-marker-dial-1{0%,6%{-webkit-transform:none;transform:none}28%,94%{-webkit-transform:rotateZ(220deg);transform:rotateZ(220deg)}95%,100%{-webkit-transform:none;transform:none}}@-webkit-keyframes rotate-bg-dial-1-1{0%,6%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}24%,94%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}95%,100%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}}@keyframes rotate-bg-dial-1-1{0%,6%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}24%,94%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}95%,100%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}}@-webkit-keyframes rotate-bg-dial-1-2{24%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}28%,94%{-webkit-transform:rotateZ(40deg);transform:rotateZ(40deg)}95%,100%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}}@keyframes rotate-bg-dial-1-2{24%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}28%,94%{-webkit-transform:rotateZ(40deg);transform:rotateZ(40deg)}95%,100%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}}@-webkit-keyframes rotate-marker-dial-2{20%,90%{-webkit-transform:rotateZ(160deg);transform:rotateZ(160deg)}91%,100%{-webkit-transform:none;transform:none}}@keyframes rotate-marker-dial-2{20%,90%{-webkit-transform:rotateZ(160deg);transform:rotateZ(160deg)}91%,100%{-webkit-transform:none;transform:none}}@-webkit-keyframes rotate-bg-dial-2-1{0%,0.5%{-webkit-transform:none;transform:none}19%,90%{-webkit-transform:rotateZ(160deg);transform:rotateZ(160deg)}91%,100%{-webkit-transform:none;transform:none}}@keyframes rotate-bg-dial-2-1{0%,0.5%{-webkit-transform:none;transform:none}19%,90%{-webkit-transform:rotateZ(160deg);transform:rotateZ(160deg)}91%,100%{-webkit-transform:none;transform:none}}@-webkit-keyframes rotate-marker-dial-3{19%,90%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}91%,100%{-webkit-transform:none;transform:none}}@keyframes rotate-marker-dial-3{19%,90%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}91%,100%{-webkit-transform:none;transform:none}}@-webkit-keyframes rotate-bg-dial-3-1{0%,1%{-webkit-transform:none;transform:none}19%,90%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}91%,100%{-webkit-transform:none;transform:none}}@keyframes rotate-bg-dial-3-1{0%,1%{-webkit-transform:none;transform:none}19%,90%{-webkit-transform:rotateZ(90deg);transform:rotateZ(90deg)}91%,100%{-webkit-transform:none;transform:none}}.demo-container{display:block;position:relative;font-size:32px;height:6em;width:6em;background:#fff}.demo-container .example{position:absolute;top:50%;left:50%;-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}.demo-container .wedge{-webkit-animation:rotate-bg 4s infinite linear;animation:rotate-bg 4s infinite linear;border-radius:0 4em 4em 0;background:red;width:2em;height:4em;-webkit-transform-origin:0% 50%;transform-origin:0% 50%}.demo-container .example1{position:absolute;width:2em;height:4em;overflow:hidden;-webkit-transform:translate(0, -50%);transform:translate(0, -50%)}.demo-container .example1 .wedge{-webkit-animation:rotate-bg 4s infinite linear;animation:rotate-bg 4s infinite linear;border-radius:0 4em 4em 0;background:red;width:2em;height:4em}.demo-container .example2{position:absolute;width:2em;height:4em;overflow:hidden;-webkit-transform:translate(-2em, -50%);transform:translate(-2em, -50%)}.demo-container .example2 .wedge{-webkit-animation:rotate-bg 4s infinite linear;animation:rotate-bg 4s infinite linear;border-radius:4em 0 0 4em;background:red;width:2em;height:4em;position:absolute;top:0;left:0;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}.demo-container .example3,.demo-container .example4,.demo-container .example5,.demo-container .example6{position:absolute;width:4em;height:4em;left:calc(50% - 2em)}.demo-container .example3 .dial-container,.demo-container .example4 .dial-container,.demo-container .example5 .dial-container,.demo-container .example6 .dial-container{position:absolute;top:0;bottom:0;width:2em;overflow:hidden}.demo-container .example3 .wedge,.demo-container .example4 .wedge,.demo-container .example5 .wedge,.demo-container .example6 .wedge{width:2em;height:4em;position:absolute}.demo-container .example3 .container1,.demo-container .example4 .container1,.demo-container .example5 .container1,.demo-container .example6 .container1{left:2em}.demo-container .example3 .container1 .wedge,.demo-container .example4 .container1 .wedge,.demo-container .example5 .container1 .wedge,.demo-container .example6 .container1 .wedge{-webkit-animation:rotate-bg-2 4s infinite linear;animation:rotate-bg-2 4s infinite linear;border-radius:0 4em 4em 0;left:0;-webkit-transform-origin:0 50%;transform-origin:0 50%}.demo-container .example3 .container2,.demo-container .example4 .container2,.demo-container .example5 .container2,.demo-container .example6 .container2{left:0}.demo-container .example3 .container2 .wedge,.demo-container .example4 .container2 .wedge,.demo-container .example5 .container2 .wedge,.demo-container .example6 .container2 .wedge{-webkit-animation:rotate-bg-1 4s infinite linear;animation:rotate-bg-1 4s infinite linear;border-radius:4em 0 0 4em;-webkit-transform-origin:2em 2em;transform-origin:2em 2em}.demo-container .example4::after,.demo-container .example5::after,.demo-container .example6::after{content:"";background:#fff;border-radius:50%;width:3em;height:3em;position:absolute;top:0.5em;left:0.5em}.demo-container .example5 .marker,.demo-container .example6 .marker{width:0.5em;height:0.5em;background:green;border-radius:50%;position:absolute;top:0;left:calc(50% - 0.25em)}.demo-container .example5 .end,.demo-container .example6 .end{-webkit-animation:rotate-marker 4s infinite linear;animation:rotate-marker 4s infinite linear;-webkit-transform-origin:50% 2em;transform-origin:50% 2em}.demo-container .example6 .marker{background:red;-webkit-animation:rotate-marker-staged 4s infinite linear;animation:rotate-marker-staged 4s infinite linear}.demo-container .example6 .container1 .wedge{-webkit-animation:rotate-bg-staged-1 4s infinite linear;animation:rotate-bg-staged-1 4s infinite linear}@-webkit-keyframes rotate-bg{100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@keyframes rotate-bg{100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@-webkit-keyframes rotate-bg-1{0%,50%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}100%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}}@keyframes rotate-bg-1{0%,50%{-webkit-transform:rotateZ(0);transform:rotateZ(0)}100%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}}@-webkit-keyframes rotate-bg-2{50%,100%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}}@keyframes rotate-bg-2{50%,100%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}}@-webkit-keyframes rotate-marker{100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@keyframes rotate-marker{100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@-webkit-keyframes rotate-marker-staged{0%{-webkit-animation-timing-function:cubic-bezier(0, 0.37, 0.5, 0.51);animation-timing-function:cubic-bezier(0, 0.37, 0.5, 0.51)}50%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@keyframes rotate-marker-staged{0%{-webkit-animation-timing-function:cubic-bezier(0, 0.37, 0.5, 0.51);animation-timing-function:cubic-bezier(0, 0.37, 0.5, 0.51)}50%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}100%{-webkit-transform:rotateZ(360deg);transform:rotateZ(360deg)}}@-webkit-keyframes rotate-bg-staged-1{0%{-webkit-animation-timing-function:cubic-bezier(0, 0.37, 0.5, 0.51);animation-timing-function:cubic-bezier(0, 0.37, 0.5, 0.51)}50%,100%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}}@keyframes rotate-bg-staged-1{0%{-webkit-animation-timing-function:cubic-bezier(0, 0.37, 0.5, 0.51);animation-timing-function:cubic-bezier(0, 0.37, 0.5, 0.51)}50%,100%{-webkit-transform:rotateZ(180deg);transform:rotateZ(180deg)}}