CSS-переходы и преобразования какое-то время были основным продуктом в наборе инструментов веб-дизайнера. Оба элемента CSS дают вам возможность создавать уникальные инновационные анимации и движения с парой изменений в вашей таблице стилей. Кроме того, все это осуществляется без использования сторонних плагинов или сложного JavaScript.
Свойства «перехода» и связанные с ними свойства «преобразования» часто стоят за некоторыми из самых интригующих элементов дизайна в современном веб-дизайне. В сочетании эти свойства позволяют создавать самые разные эффекты. Свойство перехода определяет, какие еще свойства будут анимированы, продолжительность анимации и так называемые «функции плавности». По сути, свойство transition определяет скорость и плавность анимации.
С другой стороны, свойство «преобразовать» управляет внешним видом конкретной анимации. Используя такие функции, как «scale ()», «translate ()» и «rotate ()», вы можете создавать интерактивные элементы, которые добавляют определенный современный стиль вашему веб-сайту.
Следует отметить, что настоятельно рекомендуется включать префиксы поставщиков с двумя свойствами. В то время как стандартные свойства «переход» и «преобразование» все чаще применяются, все же рекомендуется включать префиксы «-webkit» и «-ms», чтобы обеспечить совместимость с максимально возможным количеством браузеров.
Чтобы вы начали знакомство с миром переходов и преобразований CSS, ниже показан пример кода, демонстрирующий элегантный эффект наведения курсора на ссылку.
Шаг 1 - transitions-tranforms.html
Скопируйте и вставьте приведенный ниже HTML-код на свою веб-страницу. Поскольку все управляется CSS, HTML довольно прост.
<div class="container">
<div class="row ct-choice-box__row">
<div class="col-md-4 col-sm-6">
<a class="ct-choice-box business" href="#"><span class="inner"><img alt="Explore" src="https://www.solodev.com/assets/transition-animiations/transition-animations-1.jpg"> <span class="ct-choice-box__header">Explore</span></span></a>
</div>
<div class="col-md-4 col-sm-6">
<a class="ct-choice-box residents" href="#"><span class="inner"><img alt="Journey" src="https://www.solodev.com/assets/transition-animiations/transition-animations-2.jpg"> <span class="ct-choice-box__header">Journey</span></span></a>
</div>
<div class="col-md-4 col-sm-6">
<a class="ct-choice-box living" href="#"><span class="inner"><img alt="Travel" src="https://www.solodev.com/assets/transition-animiations/transition-animations-3.jpg"> <span class="ct-choice-box__header">Travel</span></span></a>
</div>
</div>
</div>
Шаг 2 - transitions-transforms.css
Загрузите приведенный ниже CSS и добавьте его на свою веб-страницу.
В таблице стилей два наиболее важных класса - это «a» и «.ct-choice-box: hover», оба из которых перечислены ниже.
a {
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
html:not(.mobile):not(.tablet) .ct-choice-box:hover {
-webkit-transform: scale(1.15);
-ms-transform: scale(1.15);
transform: scale(1.15);
z-index: 10;
}
Свойство «transition» класса «a» создает эффект синхронизации, который применяется ко всем свойствам ссылки со скоростью 250 миллисекунд и со стандартной функцией замедления.
Свойство «transform» класса «.ct-choice-box: hover» создает эффект масштабирования, при котором ссылка (в данном случае ссылка на изображение) увеличивается в размере на 1,15.
Шаг 3. Добавьте на свою веб-страницу указанные ниже элементы.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Выполнив описанные выше шаги, вы должны получить эффект перехода при наведении, который интригует, но не отвлекает от вашего UX.
Однако в этом руководстве рассматриваются только основы переходов и преобразований. Просмотрите все эффекты перехода и эффекты преобразования, чтобы вы могли создавать действительно уникальные анимации.
Сообщение в блоге о веб-дизайне Solodev
Принесено вам командой Солодева. Solodev - это облачная веб-система управления контентом, которая дает пользователям возможность воплощать в жизнь удивительные веб-дизайны.
