Стрелка спидометра является блоком div
.
Как я могу заузить ее в конце, чтобы она была как настоящая стрелка?
@keyframes rotate {
0% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(50deg);
}
100% {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(310deg);
}
}
.arrow {
height: 45px;
width: 4px;
z-index: 3;
background: #465972;
border-radius: 2px;
position: absolute;
top: calc(50% - -35px);
left: calc(50% - 1px);
box-shadow: 1px 1px 2px #0000004d;
animation: rotate 7s ease-in-out infinite alternate;
transform-origin: top left;
}