Can you please tell me how can I raise the block by clicking on the button, and that it would remain at position -25px?
$('button').click(function() {
$('.block').addClass('animation');
}).block {
width: 100px;
height: 100px;
background: green;
}
.animation {
animation: up 750ms;
}
@keyframes up {
0% {
margin-top: 0px;
}
100% {
margin-top: -25px;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block"></div>
<button>UP</button>>Solution :
You need to add the animation-fill-mode: forwards property to the .animation class rule. That will set the element to the properties of the animation finished state.
Documentation for animation-fill-mode
$('button').click(function() {
$('.block').addClass('animation');
}).block {
width: 100px;
height: 100px;
background: green;
}
.animation {
animation: up 750ms;
animation-fill-mode: forwards;
}
@keyframes up {
0% {
margin-top: 0px;
}
100% {
margin-top: -25px;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block"></div>
<button>UP</button>