A div element designed to showcase a speedometer;
<div class="outer">
<div class="needle" ></div>
</div>
The speedometer animates smoothly on hover;
.outer:hover .needle {
transform: rotate(313deg);
transform-origin: center center;
}
To make the animation occur on page load, I attempted changing the class name from .outer:hover .needle to .animateNow and used jQuery to apply this to .circle;
$(document).ready(function() {
$('.outer').addClass('animateNow');
});
However, this method did not work as expected. Any suggestions?
Here is the complete CSS code for reference;
@charset "utf-8";
/* CSS Document */
body {
background-color: black;
}
.outer {
position: relative;
/*display: inline-block;*/
height:100vw;
width: 100%;
background-image: url(../CentreDial3.png);
background-size: cover;
border-radius: 50%;
}
.needle {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
transition: all 3s ease-in;
}
.needle:before {
left: calc(50% - 2.5px);
content:"";
position: absolute;
top: 50%;
left: calc(50% - 2.5px);
height: 45%;
width: 5px;
background: #b30000;
border-radius: 40%;
}
.needle:after {
content: "";
position: absolute;
top: calc(100% + 5px);
left: 50%;
height: 10px;
width: 10px;
transform: rotate(-135deg);
transform-origin: top left;
border-top: 0px solid white;
border-left: 0px solid black;
}
.outer:hover .needle,
.outer.animateNow .needle{
transform: rotate(313deg);
transform-origin: center center;
}