В css
анимации есть свойство transform-origin которое задает точку анимации.
В нашем случае это будет точка по которой будет вращаться картинка.
Просто надо определить точку анимации и вращать картинку по нему.
.progress__bar {
display: inline-block;
background: url("https://image.ibb.co/dTVvGm/js_skill.png") no-repeat;
background-size: contain;
height: 128px;
width: 100%;
position: relative;
}
.arrow {
position: absolute;
transform: rotateZ(-33deg);
height: 32px;
bottom: -5px;
left: 85px;
animation: example 5s linear 2s infinite alternate;
transform-origin: 40px 26px;
}
span{
position: absolute;
top: 139px;
left: 138px;
width: 1px;
height: 1px;
background: green;
}
@keyframes example {
from {
transform: rotateZ(-33deg);
}
to {
transform: rotateZ(148deg);
}
}
<div class="progress__bar">
<img class="arrow" src="https://image.ibb.co/dp9pbm/Untitled_1.png" alt="" />
</div>
Вот второй вариант с конечной остановкой.
.progress__bar {
display: inline-block;
background: url("https://image.ibb.co/dTVvGm/js_skill.png") no-repeat;
background-size: contain;
height: 128px;
width: 100%;
position: relative;
}
.arrow {
position: absolute;
transform: rotateZ(-33deg);
height: 32px;
bottom: -5px;
left: 85px;
animation: example 5s linear 2s;
animation-direction: normal;
animation-fill-mode: forwards;
transform-origin: 40px 26px;
}
span{
position: absolute;
top: 139px;
left: 138px;
width: 1px;
height: 1px;
background: green;
}
@keyframes example {
from {
transform: rotateZ(-33deg);
}
to {
transform: rotateZ(148deg);
}
}
<div class="progress__bar">
<img class="arrow" src="https://image.ibb.co/dp9pbm/Untitled_1.png" alt="" />
</div>
Вот еще один вариант.
Можно задать другой animation-timing-function
. Например ease-out
. И сейчас конечная часть анимации будет медленней чем начальная.
Так красиво.
.progress__bar {
display: inline-block;
background: url("https://image.ibb.co/dTVvGm/js_skill.png") no-repeat;
background-size: contain;
height: 128px;
width: 100%;
position: relative;
}
.arrow {
position: absolute;
transform: rotateZ(-33deg);
height: 32px;
bottom: -5px;
left: 85px;
-webkit-animation: in 3s linear 1s;
animation-timing-function: ease-out;
animation-direction: normal;
animation-fill-mode: forwards;
transform-origin: 40px 26px;
}
span{
position: absolute;
top: 139px;
left: 138px;
width: 1px;
height: 1px;
background: green;
}
@keyframes in {
from {
transform: rotateZ(-33deg);
}
to {
transform: rotateZ(148deg);
}
}
<div class="progress__bar">
<img class="arrow" src="https://image.ibb.co/dp9pbm/Untitled_1.png" alt="" />
</div>