CSS animation set value

Question

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>

Please revise your post title to ask a clear, specific question in sentence format. See [ask]. You have word soup now. — isherwood, Jan 30 '23 at 15:51

score 3 · Accepted Answer · edited Jan 30 '23 at 15:51

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>

score 1 · Answer 2 · answered Jan 30 '23 at 16:07

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 class="block"></div>
<button>UP</button>

CSS animation set value

2 Answers2