1

Transition и min-width.
Я делала анимацию для ширины, но почему-то она не срабатывает для min-width и min-height.

.btn {
    min-width: 200px;
    min-height: 50px;
    padding: 0 15px;

    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none ;
    font-weight: 500;
    font-size: 18px;
    background-color: #DB2512;
    transition: width 2s, height 4s;
}

.btn:hover {
    width: 300px;
    height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Кнопка</title>
</head>
<body>

<a href="#" class="btn">Кнопка</div>

</body>

2 ответа 2

0

Для создания анимации увеличения/уменьшения объектов обычно используют CSS-свойства:

-webkit-transform: scale(1.2);
  -ms-transform: scale(1.2); //к примеру 1.2
  transform: scale(1.2);

Пример использования такого подхода

2
  • Блок из-за этого может вылезти за экран, плюс к тому увеличенные размеры через scale не учитывается в %-ой ширине/высоте (Пример: width: 50%).
    – ΝNL993
    24 окт 2022 в 17:06
  • Кстати комментарии в CSS ставятся только такие: /* к примеру 1.2 */ :)
    – ΝNL993
    24 окт 2022 в 17:08
0

А зачем писать min-width и min-height? :)

.btn {
    width: 200px;
    height: 50px;
    padding: 0 15px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-decoration: none ;
    font-weight: 500;
    font-size: 18px;
    background-color: #DB2512;
    transition: width 2s, height 4s;
}

.btn:hover {
    width: 300px;
    height: 80px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Кнопка</title>
</head>
<body>

<a href="#" class="btn">Кнопка</div>

</body>

2
  • Хотела бы разобраться почему не работает min-h и min-w с transition. Это код просто для примера.
    – telepuz
    24 окт 2022 в 17:12
  • @telepuz всё просто - max-width не width, также с height, если вы хотите оставить min-height и min-width то просто также добавьте их, но только к ним добавьте ещё width и height (с теми же значениями).
    – ΝNL993
    24 окт 2022 в 17:16

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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