1

Я хочу сделать анимацию которая изменяет высоту блока с 100px до 700px , все получилось но есть проблема . Анимация проигрывается а потом высота приходит в начальное положение , как сделать что бы анимация останавливалась на высоте 700px пока не отведешь мышку от блока

1
  • 2
    Добавляйте же код к вопросам 15 мар 2019 в 15:04

3 ответа 3

2

Если стоит задача всего лишь менять по наведению высоту блока, для этого не нужна анимация - просто добавьте блоку свойство transition:

div {
  width: 300px;
  height: 100px;
  border :1px solid red;
  transition: 1s;
}
div:hover {
  height: 700px;
}
<div></div>

1

Можно сделать при помощи свойства transition

$('.add').on('click', () => {
  $('.add').remove();
  $('.block').addClass('anim');
});
.block {
  display: block;
  width: 200px;
  height: 100px;
  background: red;
  transition: height linear 1s;
}

.anim {
  background: green;
  height: 700px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block"></div>
<input type="button" class="add" value="анимация">

Можно при помощи animation

$('.add').on('click', () => {
  $('.add').remove();
  $('.block').addClass('anim');
});
.block {
  display: block;
  width: 200px;
  height: 100px;
  background: red;
}

.anim {
  background: green;
  animation: NewHeight linear 1s 1 forwards;
}

@keyframes NewHeight {
  to {
    height: 700px;
  }
}

@-webkit-keyframes NewHeight {
  to {
    height: 700px;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="block"></div>
<input type="button" class="add" value="анимация">

0

Вообще, по описанию похоже, что надо делать transition, а не animation.

Но если надо использовать именно animation, то там есть параметр animation-fill-mode, который можно выставить значение both.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.