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

В этой статье изложены эффекты переходов, которые без особых усилий можно реализовать практически в любом веб-проекте.

Fade In

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
.fade-in:hover {
    opacity: 1;
}

Slide Up

.slide-up {
    transform: translateY(100%);
    transition: transform 0.5s ease-in-out;
}
.slide-up:hover {
    transform: translateY(0);
}

Scale Up

.scale-up {
    transform: scale(1);
    transition: transform 0.5s ease-in-out;
}
.scale-up:hover {
    transform: scale(1.2);
}

Rotate

.rotate {
    transform: rotate(0deg);
    transition: transform 0.5s ease-in-out;
}
.rotate:hover {
    transform: rotate(45deg);
}

Skew

.skew {
    transform: skewX(0deg);
    transition: transform 0.5s ease;
}
.skew:hover {
    transform: skewX(20deg);
}

Grow Width

.grow-width {
    width: 100px;
    transition: width 0.5s ease-in-out;
}
.grow-width:hover {
    width: 200px;
}

Background Color Change

.bg-color-change {
    background-color: #3498db;
    transition: background-color 0.5s ease;
}
.bg-color-change:hover {
    background-color: #2ecc71;
}

Text Color Change

.text-color-change {
    color: #000;
    transition: color 0.3s ease;
}
.text-color-change:hover {
    color: #e74c3c;
}

Border Radius Change

.border-radius-change {
    border-radius: 0;
    transition: border-radius 0.5s ease;
}
.border-radius-change:hover {
    border-radius: 50%;
}

Box Shadow

.box-shadow {
    box-shadow: none;
    transition: box-shadow 0.3s ease-in-out;
}
.box-shadow:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

Text Shadow

.text-shadow {
    text-shadow: none;
    transition: text-shadow 0.3s ease;
}
.text-shadow:hover {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
}

Opacity Change

.opacity-change {
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
}
.opacity-change:hover {
    opacity: 0.5;
}

Заключение

CSS-переходы значительно улучшают пользовательский интерфейс (UI) вашего веб-сайта. Экспериментируйте с этими эффектами, создавая привлекательный и динамичный интерфейс для своих пользователей.

Спасибо за внимание.

Перевод статьи Pratik Tamhane “12 Simple and Effective CSS Transition Effects for Your Website”