Question 45660 in CSS Question posted in
Some basic documentation can be found here.

CSS animation set value

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>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search