Skip to main content

CSS transition

CSS transition

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, которые впервые привлекли наше внимание, были анимации и... Читать далее

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

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

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

Прогресс бар начал использоваться в интернете с тех пор, как мы поняли, что не все... Читать далее

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

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

CSS animation

Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как цвет,... Читать далее

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

С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление... Читать далее

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

*

code