Эффект наведения CSS не перемещается плавно

Как говорит мой заголовок, когда я пытаюсь навести курсор на свой контейнер, он мгновенно увеличивается, а не плавно переходит от исходного размера. Я использую преобразование и переход в моем css.

JS Скрипка кода: https://jsfiddle.net/1kbtjaLs/

Эффект наведения:

  .card:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);

    -webkit-transform: all .3s ease-in-out time;
    -moz-transform: all .3s ease-in-out time;
    -ms-transform: all .3s ease-in-out time;
    -o-transform: all .3s ease-in-out time;
    transition: all .3s ease-in-out time;
  }

легкость на выходе, похоже, не работает должным образом.

Эффект наведения CSS не перемещается плавно

html css twitter-bootstrap transactions transform

23.07.2019 05:58

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

719

Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

У вас нет определенной переменной time (используется в transition: all .3s ease-in-out time); изменение этого на .3s покажет ваш плавный переход, как и ожидалось.

Обратите внимание, однако, что переход все равно будет «прыгать» назад, когда вы теряете наведение. Чтобы в этом случае переход был плавным, вам также нужно применить стили к .card:

.container-membership {
  margin-top: 100px;
}

;
.list-group-item {
  padding: 5px;
  border: 0px;
}

.price {
  font-size: 72px;
}

.currency {
  font-size: 25px;
  position: relative;
  top: -30px;
}

.card {
  width: 350px;
  -webkit-transform: all .3s ease-in-out .3s;
  -moz-transform: all .3s ease-in-out .3s;
  -ms-transform: all .3s ease-in-out .3s;
  -o-transform: all .3s ease-in-out .3s;
  transition: all .3s ease-in-out .3s;
}

.card:hover {
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -ms-transform: scale(1.05);
  -o-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transform: all .3s ease-in-out .3s;
  -moz-transform: all .3s ease-in-out .3s;
  -ms-transform: all .3s ease-in-out .3s;
  -o-transform: all .3s ease-in-out .3s;
  transition: all .3s ease-in-out .3s;
}

<html lang = "en">

<head>
  <link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">
  <script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin = "anonymous"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin = "anonymous"></script>
  <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin = "anonymous"></script>
</head>

<body class = "bg-color-white">


  <div class = "container container-membership">
    <div class = "row">
      <div class = "col-md-6 col-offset-3">
        <div class = "card">
          <div class = "card-header text-center">
            <h3 class = "price"><span class = "currency">USD</span>49</h3>
          </div>
          <div class = "card-block text-center">
            <br>
            <div class = "card-title">
              <h4>Plan 1</h4>
            </div>
            <div class = "container">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </div>
            <br>
          </div>
        </div>
      </div>
    </div>
  </div>
  <br><br>
</body>

</html>

23.07.2019 06:04

Ответ принят как подходящий

Пожалуйста, попробуйте этот код ниже

css

 .card {
    width: 350px;
    transition: 0.5s all ease 0s;
    -webkit-transition: 0.5s all ease 0s;
    -moz-transition: 0.5s all ease 0s;
    -ms-transition: 0.5s all ease 0s;
}
.card:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
    transform: scale(1.05);
    transition: 0.5s all ease 0s;
    -webkit-transition: 0.5s all ease 0s;
    -moz-transition: 0.5s all ease 0s;
    -ms-transition: 0.5s all ease 0s;
}

спасибо, разминка не нужна

— 23.07.2019 07:27

23.07.2019 06:04

Несколько проблем:

transition свойство должно быть на .card вместо .card:hover
time значение в transition недействительно, time должно быть в секундах, чтобы указать задержку (если это то, чего вы пытаетесь достичь)
Удалите все transform: all ease-out...., потому что это тоже недействительно, оставьте только часть transform: scale(1.05).

23.07.2019 06:10

Другие вопросы по теме

Как отображать один класс из массива за раз на интервале?

JS (LOOPS): Поиск идеального цикла фильтрации

Как заменить текст текстом анимации ключевого кадра при наведении?

Значок меню не отображается в Safari на рабочем столе или вообще на мобильном устройстве

Z-index не работает с псевдоэлементом по отношению к следующему элементу

Как решить проблему с шириной таблицы td

DIV не отображается

Чтение elem.style -- формат результата гарантируется спецификацией?

Наблюдатель за файлами PhpStorm SCSS создает дубликаты

Есть ли способ добавить «активный» класс в элемент списка на основе его местоположения в div?

Эффект наведения CSS не перемещается плавно

Ответы 3

Другие вопросы по теме

Похожие вопросы