Spin a Compass Needle

Published: | Tags: , , and

For one of my web sites I wanted to have an animated compans.

SVG File

<svg>
    <g>
        <circle class="compass-body"></circle>
        <path class="compass-needle"></path>
        <circle class="compass-needle-axis"></circle>
    </g>
</svg>

CSS Animation

@keyframes spin {
    0% {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 0deg);
    }

    50% {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 180deg);
    }

    100% {
        transform-origin: center;
        transform: rotate3d(0, 0, 1, 0deg);
    }
}
Demo (Open in New Window).