Трансформации включают вращения, переходы между элементами, позволяют задавать временные параметры для преобразования и многое другое!

Простым примером может служить изменение эффекта при наведении курсора мыши на ссылку: плавное изменение цвета от одного к другому.

Сначала определяем цвет ссылки:

.box a {
    color: #0f0;
}

Устанавливаем цвет и свойства для анимации с помощью transition-property:

box10 a:hover {
    color: #0f0;
    -moz-transition-property: color;
    -webkit-transition-property: color;
}

Устанавливает продолжительность анимации:

#box10 a:hover {
    color: #0f0;
    -moz-transition-property: color;
    -webkit-transition-property: color;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
}

Устанавливаем тип анимации:

#box10 a:hover {
    color:#31801f;
    -moz-transition-property: color;
    -webkit-transition-property:  color;
    -moz-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    -moz-transition-timing-function: ease;
    -webkit-transition-timing-function: ease;
}

Добавлено: 17 Апреля 2018 18:36:57 Добавил: Андрей Ковальчук Нравится 0

Добавить