CSS animation set value-CodePudding

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 ></div>
<button>UP</button>

CodePudding user response：

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 ></div>
<button>UP</button>

CodePudding user response：

Use CSS transforms instead of margins:

$('button').click(function() {
  $('.block').addClass('animation');
})

.block {
  width: 100px;
  height: 100px;
  background: green;
  transform: translateY(0);
  transition: transform 750ms;
}

.animation {
  transform: translateY(-25px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div ></div>
<button>UP</button>