html, body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

body {
    background-color: black;
}

img {
    width: 80vmin;
}

img.speed1.clockwise { animation: rotatation1 2s infinite linear; }
img.speed2.clockwise { animation: rotatation2 1s infinite linear; }
img.speed3.clockwise { animation: rotatation3 0.5s infinite linear; }
img.speed4.clockwise { animation: rotatation4 0.25s infinite linear; }
img.speed1.counterClockwise { animation: rotatation1r 2s infinite linear; }
img.speed2.counterClockwise { animation: rotatation2r 1s infinite linear; }
img.speed3.counterClockwise { animation: rotatation3r 0.5s infinite linear; }
img.speed4.counterClockwise { animation: rotatation4r 0.25s infinite linear; }

@keyframes rotatation1 {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

@keyframes rotatation2 {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

@keyframes rotatation3 {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

@keyframes rotatation4 {
    from { transform: rotate(0deg); }
    to { transform: rotate(359deg); }
}

@keyframes rotatation1r {
    from { transform: rotate(359deg); }
    to { transform: rotate(0deg); }
}

@keyframes rotatation2r {
    from { transform: rotate(359deg); }
    to { transform: rotate(0deg); }
}

@keyframes rotatation3r {
    from { transform: rotate(359deg); }
    to { transform: rotate(0deg); }
}

@keyframes rotatation4r {
    from { transform: rotate(359deg); }
    to { transform: rotate(0deg); }
}