/*Downloaded from https://www.codeseek.co/Yuschick/css-animation-direction-gears-demo-RaZrOW */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    background: #000;
}

button {
    margin: 15px calc(50% - 100px);
    width: 200px;
    text-align: center;
    padding: 5px;
}

.container {
    width: 480px;
    height: 328px;
    margin: 20px auto;
    position: relative;
}

.container .gear {
    position: absolute;
}

.container .gear.one {
    top: 33%;
    width: 31.7%;
    height: 46%;
    background: url("/img/gears/gears5.png") no-repeat;
    background-size: cover;
    -webkit-animation: rotate 10s linear;
    -moz-animation: rotate 10s linear;
    animation: rotate 10s linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.container .gear.one.reverse {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}

.container .gear.two {
    top: 66%;
    left: 24.2%;
    width: 23.7%;
    height: 34.6%;
    background: url("/img/gears/gears2.png") no-repeat;
    background-size: cover;
    -webkit-animation: rotate 10s linear reverse;
    -moz-animation: rotate 10s linear reverse;
    animation: rotate 10s linear reverse;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.container .gear.two.reverse {
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    animation-direction: normal;
}

.container .gear.three {
    top: 49%;
    left: 40.2%;
    width: 17.6%;
    height: 25.7%;
    background: url("/img/gears/gears3.png") no-repeat;
    background-size: cover;
    -webkit-animation: rotate 6.75s linear;
    -moz-animation: rotate 6.75s linear;
    animation: rotate 6.75s linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.container .gear.three.reverse {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}

.container .gear.four {
    top: 44%;
    left: 56.5%;
    width: 24%;
    height: 35%;
    background: url("/img/gears/gears4.png") no-repeat;
    background-size: cover;
    -webkit-animation: rotate 10s linear reverse;
    -moz-animation: rotate 10s linear reverse;
    animation: rotate 10s linear reverse;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.container .gear.four.reverse {
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    animation-direction: normal;
}

.container .gear.five {
    left: 51%;
    width: 31.2%;
    height: 45.6%;
    background: url("/img/gears/gears1.png") no-repeat;
    background-size: cover;
    -webkit-animation: rotate 10.5s linear;
    -moz-animation: rotate 10.5s linear;
    animation: rotate 10.5s linear;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.container .gear.five.reverse {
    -webkit-animation-direction: reverse;
    -moz-animation-direction: reverse;
    animation-direction: reverse;
}

.container .gear.six {
    top: 10%;
    left: 81.5%;
    width: 17%;
    height: 24.9%;
    background: url("/img/gears/gears6.png") no-repeat;
    background-size: cover;
    -webkit-animation: rotate 7s linear reverse;
    -moz-animation: rotate 7s linear reverse;
    animation: rotate 7s linear reverse;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

.container .gear.six.reverse {
    -webkit-animation-direction: normal;
    -moz-animation-direction: normal;
    animation-direction: normal;
}

@-webkit-keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    100% {
        -moz-transform: rotate(360deg);
    }
}

@keyframes rotate {
    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}