how to make animated 404 gears?

Question

I want to make a 404 page with a couple of gears that need to spin for a second or so and then slowly stop spinning and finally stand still completely. This seems to me as a nice effect to let my visitors know that something went wrong (machine/gears stopped working).

I'd like to accomplish this with pure css, but could not find out how to do so by Googling. I'm also not sure how to do it with jQuery. Any suggerstions are welcome, but I still would prefer css3.

score 5 · Accepted Answer · edited May 23 '17 at 10:29

You can start with this basic CSS animation I made here. You can add animation-timing-functions such as ease, ease-out or a custom cubic-bezier function to achieve the desired result.

Below, I have used the timing-function ease-out.

.gear, .gear2{
    height: 100px;
    width: 100px;
    background: transparent;
    box-shadow: inset 0 0 0px 35px dimgray, inset 0 0 0px 40px #444;
    border-radius: 50%;
    position: relative;
    margin: 20px auto;
    -webkit-animation: rotate 2.4s ease-out 1;
    -moz-animation: rotate 2.4s ease-out 1;
    animation: rotate 2.4s ease-out 1;
}
.gear:before, .gear:after, .gear2:before, .gear2:after {
    height: 20px;
    width: 20px;
    content: '';
    border-radius: 20%;
    position: absolute;
    background: dimgray;
}
.gear:before, .gear2:before{
    box-shadow: 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray, 0 100px 0 0 dimgray;
    top: -10px; left: 40px;
}
.gear:after, .gear2:after{
    transform: rotate(45deg);
    top: 5px; left: 76px;
    box-shadow: 0px 100px 0 0 dimgray, 50px 50px 0 0 dimgray, -50px 50px 0 0 dimgray;
}
.gear2 {
    top: -28px; left: 62px;
    -webkit-animation: rotate2 2.4s ease-out 1;
    -moz-animation: rotate2 2.4s ease-out 1;
    animation: rotate2 2.4s ease-out 1;
}
/*Keyframes*/
@-webkit-keyframes rotate {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(-360deg);}
}
@-moz-keyframes rotate {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(-360deg);}
}
@keyframes rotate {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(-360deg);}
}
@-webkit-keyframes rotate2 {
    0% {-webkit-transform: rotate(0deg);}
    100% {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate2 {
    0% {-moz-transform: rotate(0deg);}
    100% {-moz-transform: rotate(360deg);}
}
@keyframes rotate2 {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}

<div class="gear"></div>
<div class="gear2"></div>

FIDDLE

Screenshot :
enter image description here

Not just answering, but even working it out for me. Thanks a lot! — Axel Köhler, Feb 28 '15 at 09:19
Thanks helped for website maintenance page, for **infinite spin** just add `-webkit-animation: rotate2 2.4s ease-out infinite; -moz-animation: rotate2 2.4s ease-out infinite; animation: rotate2 2.4s ease-out infinite;` — Shaiju T, Jul 23 '16 at 15:51

how to make animated 404 gears?

1 Answers1