Доброго времени суток, читатели и подписчики моего обучающего блога. Сегодня я решил посвятить статью интересной тематике – анимациям. Почти на каждом веб-сервисе есть несколько анимированных объектов, которые оживляют дизайн страниц и придают им некой современности.
Поэтому после прочтения текущей публикации вы узнаете, как создается анимация текста css-инструментами даже без js или подключения скриптовой библиотеки jQuery. Не изменяя своим принципам, я также привел несколько интересных примеров. Приступим же!
Набор инструментов для создания анимаций
Буквально несколько лет назад девелоперы всего мира мечтали о возможностях, благодаря которым можно будет создавать движущиеся и видоизменяющиеся элементы при помощи только html и css. Но на тот момент не существовало других решений, кроме как использовать скрипты или языки высокого уровня.
С появлением же html5 и в особенности css3 их желание осуществилось. Названные платформы обладают широчайшим набором всевозможных инструментов, благодаря которым можно анимировать абсолютно любые объекты веб-страниц.
Все они связаны с такими свойствами, как transition и animation. Оба названных элемента отвечают за анимирование объектов. Из-за этого человек, который плохо владеет знаниями css-языка, часто не может понять, в чем их отличие, и тем более определить, в какой ситуации какое свойство использовать.
И все же между ними есть существенные различия, с которыми нужно считаться. Давайте разберем каждый инструмент подробно. Пожалуй, начнем с первого.
Transition
Беря во внимание дословный перевод наименования свойства, уже становится понятно, за что оно отвечает. Так, transition означает «переход, перемещение». Именно поэтому этот параметр отвечает за переход от одного состояния редактируемого объекта к другому.
Если вам на веб-странице своего ресурса необходимо реализовать плавное изменение состояния, например, кнопки при наведении на нее курсора, то для этого идеально подойдет именно этот элемент.
Чаще всего transition используется вместе с псевдовдоклассами, а в особенности с :hover. Также такой прием применяют, когда на сайте пользователь добавляет или удаляет какую-то информацию.
Главной отличительной чертой переходов от анимации является их способ описания движения. С их помощью можно описать только два состояния: начальное и конечное. Заметьте, промежуточных состояний нет и быть никак не может.
Среди свойств, отвечающих за такой тип анимирования объектов, существуют:- transition-property – задает наименование редактируемого элемента. Можно указать конкретное свойство (например, bottom) или одно из ключевых (none, all);
- transition-duration – отвечает за время выполнения перехода.
- transition-timing-function – определяет скорость изменения одного состояния на другое. Все они задаются через стандартные ключевые слова: linear – равномерный переход, ease – ускорение посреди анимации, ease-in – ускорение происходит к концу, ease-out – наоборот сначала движение ускоренное, после затухает, ease-in-out – видоизменение происходит медленно, cubic-bezier – движение устанавливается по кривой Безье.
- transition-delay – указывает задержку движения.
Для наглядности разберите вот этот примерчик.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <head>
<meta charset="utf-8">
<title>Кнопка</title>
<style>
body {background: #FFF8DC;}
button {
padding: 19px 33px;
margin-left: 46px;
margin-top: 36px;
background:#FFF8DC;
border: 3px inset #bDC0B0;
outline:3px outset #838B80;
color: #8B7D6B;
font-size:47px;
position: relative;
transition: all 0.1s ;
}
button:hover {
position: absolute;
background:#bDC0B0;
color: #FFF8DC;
outline:5px outset #FFF0F0;
box-shadow: -5px -5px 10px #101;
}
</style>
</head>
<body>
<button>Кнопка</button>
</body> |
Animation
Вот теперь обсудим анимации. Само по себе свойство animation намного мощнее предыдущего. Оно позволяет создавать не просто переходы по состояниям, а сложные передвижения, реальные анимации и множество разных удивительных эффектов.
Благодаря описываемому свойству можно указывать не только начальное и конечное положение элементов на веб-странице, а еще и промежуточные точки. Вследствие этого animation позволяет разработчику тщательно контролировать каждое переходное состояние и управлять ими как ему захочется.
В основном этот инструмент используют при загрузке страницы. Наверняка вы видели такие веб-ресурсы, на которых при загрузке контента стояла анимированная заставка. Также данная технология широко применяется во время инструктажа пользователя о том, как пользоваться веб-сайтом и так далее.
Animation функционирует только вместе с правилом @keyframes.
В нем прописываются промежуточные состояния движущегося объекта. Первый набор параметров устанавливается при помощи селектора начала – from, а последний – при помощи to. Остальные же точки указываются в процентах.
Ниже я прикрепил таблицу, в которую внес основные свойства. Все они перекликаются с перечисленными выше свойствами типа transition.
| Свойство | Предназначение |
| animation-name | Задает наименование движению, через которое после @keyframes будет обращаться и устанавливать анимационные параметры. |
| animation-duration | Отвечает за время воспроизведения анимации. |
| animation-timing-function | Определяет скорость изменения переходов. |
| animation-iteration-count | Указывает сколько раз будет повторяться анимация. Можно воспроизводиться бесконечно. |
А теперь перейдем к примеру. Я решил написать программный код, который создаст проявляющийся текст в движении.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | <head>
<meta charset="utf-8">
<title>Кнопка</title>
<style>
body {background: #EeFFFF;}
h2 {
font-size: 89px;
color: #00FF7F;
font-family:Arial;
text-shadow: -1px 1px 7px #3CB371,-13px 9px 14px;
animation-name: fly;
animation-duration: 3s;
}
@keyframes fly{
from {
opacity: 0;
text-shadow:none;
animation-delay: 9s;
}
15% {
color: rgba(0, 255, 127, .05);
animation-delay: 7s;
transform: translateY(100%);
}
25% {
color: rgba(0, 255, 127, .15);
text-shadow: -1px 1px 7px #3CB371;
animation-delay: 3s;
}
45% {
color: rgba(0, 255, 127, .29);
}
65% {
color: rgba(0, 255, 127, .47);
}
79% {
color: rgba(0, 255, 127, .63);
}
93% {
color: rgba(0, 255, 127, .89);
}
to {
color: #00FF7F;
}
}
</style>
</head>
<body>
<h2>Летающая фраза</h2>
</body> |
На этой ноте я хочу закончить статью. Вы узнали основные инструменты для работы с анимированными элементами, а также на примерах могли сравнить их главные отличия. Генерируйте свои интересные задачи и пытайтесь их реализовать самостоятельно.
А я желаю вам успехов! Не забывайте вступать в ряды моих подписчиков и приглашать в наш дружный коллектив своих друзей и знакомых. До скорых встреч. Пока-пока!
С уважением, Роман Чуешов
