CSS transition

19 февраля 2020 CSS

CSS transition — это свойство, с помощью которого можно сделать плавные эффекты перехода элемента из одного состояния в другое. Ну например плавное изменение цвета блока при наведении. Выглядит это современно, а применяется очень просто и не надо использовать JavaScript. В этой статье разберем некоторые примеры, которые скорее всего вам пригодятся в работе.

Всего лишь добавляем к блоку свойство transition: 3s; и смотрим, что получилось:

Плавное изменение цвета блока

<div class="block1">Плавное изменение цвета блока</div>

<style>
.block1 {
    background: #da4453;
    color: #fff;
    font-size: 21px;
    font-weight: bold;
    cursor: pointer;
    margin: 50px auto;
    width: 500px;
    padding: 20px;
    text-align: center;
    transition: 3s;
}

.block1:hover {
    background: #333;
    color: #fff;
}
</style>

Плавное изменение ширины блока

<div class="block2">Плавное изменение ширины блока</div>

<style>
.block2 {
    background: #da4453;
    color: #fff;
    font-size: 21px;
    font-weight: bold;
    cursor: pointer;
    margin: 50px auto;
    width: 500px;
    padding: 20px;
    text-align: center;
}

.block2:hover {
    width: 200px;
    transition: 3s;
}
</style>

Дополнительные настройки

Общий синтаксис свойства следующий:
transition: transition-property transition-duration transition-timing-function transition-delay;

transition-property — список свойств, на которые распространяется трансформация, например background
transition-duration — время, в течении которого происходит трансформация
transition-timing-function — замедление, ускорение и другие временные эффекты. Может быть ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end
transition-delay — задержка, после которой начинается трансформация

циклевание паркета киев

Дополнительные свойства можно записать как отдельно, так и прямо в строку, например так:

transition: background-color 3s linear 3s;

Плавное вращение блока

<div class="block3">Плавное вращение блока</div>

<style>
.block3 {
    background: #da4453;
    color: #fff;
    font-size: 21px;
    font-weight: bold;
    cursor: pointer;
    margin: 50px auto;
    width: 500px;
    padding: 20px;
    text-align: center;
    transition: 3s linear;
}

.block3:hover {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>

Плавное изменение прозрачности блока

<style>
.block4 {
    background: #da4453;
    color: #fff;
    font-size: 21px;
    font-weight: bold;
    cursor: pointer;
    margin: 50px auto;
    width: 500px;
    padding: 20px;
    text-align: center;
    transition: 3s linear;
	
}

.block4:hover {
    opacity: 0.1;
}
</style>

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

Поделиться:

Остались вопросы по статье? Задайте их прямо сейчас!

Похожие записи

Как использовать animate.css

Посмотрим правде в глаза, новые функции CSS3, которые впервые привлекли наше внимание, были анимации и переходы. Это то, чего у нас никогда не было раньше без включения JavaScript. И только то, что это CSS, не означает, что нет библиотек, которые Читать далее

Как использовать фильтры CSS

Фильтры CSS - это мощный инструмент, который позволяет нам создавать удивительные визуальные эффекты с нашими элементами. Особенно они хороши для hover эффектов. Фильтры предоставляют нам методы для изменения рендеринга базового элемента DOM. Они позволяют сделать такие эффекты, как например, размытие, Читать далее

Как сделать прогресс бар на CSS

Прогресс бар начал использоваться в интернете с тех пор, как мы поняли, что не все будет загружаться мгновенно. Он служит для уведомления пользователя о ходе выполнения конкретной задачи на вашем веб-сайте, такой как загрузка, выгрузка, загрузка приложения и т.д. Раньше Читать далее

Прижать футер с помощью Flexbox

Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее

CSS animation

Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как цвет, цвет фона, высота или ширина. В этой статье рассмотрим на примерах, как использовать анимацию на чистом CSS с помощью этого свойства. Каждую анимацию необходимо определить Читать далее

Использование функции CSS calc()

С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее

Добавить комментарий Отменить ответ

Комментарий

Имя

Код безопасности *

Введите символы отображаемые выше: