stop animation at last frame
@mixin rotating($tg) {
-webkit-transform: rotate(#{$tg}deg);
-ms-transform: rotate(#{$tg}deg);
transform: rotate(#{$tg}deg);
}
div {
width: 100px;
height: 100px;
position: absolute;
opacity: 1;
animation: volar 5s cubic-bezier(0, 0, 0.41, 0.97) 1 forwards 0.5s;
}
@keyframes volar {
0% {
@include rotating(22);
top: -150px;
}
33% {
@include rotating(2);
}
66% {
@include rotating(22);
opacity: 1;
}
100% {
@include rotating(12);
top: 400px;
opacity: 0;
}
}