I have this SVG image (displayed below) and I am looking to create a continuous animation on the meter dashboard hand. The animation I want involves it (the meter hand) rotating 90 degrees to the left and then 90 degrees to the right. Usually, the CSS property used for such animations is Transform: rotate()", but alternative properties are acceptable. Can anyone suggest how to achieve this? My coding is done in CSS and HTML.
This is the SVG image:
https://i.sstatic.net/AMnMj.png
The desired rotation to the left:
https://i.sstatic.net/SJqVY.png
The desired rotation to the right:
https://i.sstatic.net/03zVL.png
This is the SVG code with the meter hand having an ID called "MeterHand", along with the CSS I attempted (Upon execution, you'll notice that the entire SVG rotates as one unit in only one direction. The goal is to replicate the rotations shown above.)
#MeterHand {
-webkit-animation: spin 4s linear;
-moz-animation: spin 4s linear;
animation: spin 4s linear;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(90deg);
}
}
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(90deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}<svg xmlns="http://www.w3.org/2000/svg" width="488" height="486">
<path fill="none" d="M216 294H20.33"/>
<circle class="DashboardBorder" fill="#E6E7E8" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.417" cy="245" r="235.417"/>
<circle class="MiddleCircle" fill="#BCBEC0" stroke="#000" stroke-width="3" stroke-miterlimit="10" cx="245.333" cy="245.001" r="29.333"/>
<path fill="#A7A9AC" stroke="#000" stroke-width="3" stroke-miterlimit="10" d="M164.667 365.333h158.666l17.667 58H147.333z"/>
<!-- Additional paths etc. -->
</svg>