| Kosten | Четверг, 28 Июня 2018, 19:14 | Сообщение 1 |
| Анимация CSS предлагает восемь различных свойств для управления анимацией. Некоторые из них сопоставимы с аналогично названными свойствами перехода. Свойство animation-name определяет список анимаций, разделенных запятыми, для применения к данному селектору. Он похож на свойство перехода, поскольку он в конечном итоге определяет свойства, которые анимируются. С свойством перехода эти свойства явно называются. С именем анимации @keyframes правило явно указано, и это правило содержит свойство, которые будут анимированным.
Человеческий мозг старался обратить внимание на движущиеся объекты. Из-за этого естественного рефлекса, чтобы заметить движение, добавление анимации на ваш сайт или приложение является мощным способом привлечь внимание пользователей к важным областям вашего продукта и добавить интерес к вашему интерфейсу.
CSS-анимация предлагает множество различных параметров, которые вы можете настроить:
animation-name - имя анимации, которая ссылается на анимацию, созданную с использованием ключевых кадров;
animation-duration - как долго анимация должна длиться, в секундах;
animation-timing-function - синхронизации, используемая анимацией, общие значения: линейная, легкость;
animation-delay - необязательное количество секунд до начала анимации;
animation-iteration-count - сколько раз анимация должна выполняться;
animation-direction - направление анимации, где быть нормальным, обратным и альтернативным или чередующимся обратным. В последних 2 он чередуется вперед, а затем назад;
animation-fill-mode - определяет, как стилизовать элемент, когда анимация заканчивается, после того, как закончится номер его итерации. Ни один, ни обратно не возвращаются к первым стилям ключевого кадра. Нападающие и оба используют стиль, установленный в последнем ключевом кадре;
animation-play-state - если она установлена на паузу, она приостанавливает анимацию:
Свойство animation является обобщающим для всех этих свойств, в следующем порядке:
Код .container {
animation: name
duration
timing-function
delay
iteration-count
direction
fill-mode
play-state;
}
Когда все будет хорошо, анимации могут добавить ценное взаимодействие и обратную связь, а также улучшить эмоциональный опыт, принести наслаждение и добавить личность в ваш интерфейс. Фактически, оживить означает оживить.
Создавайте анимационную магию с использованием ключевых кадров, свойств анимации, таких как синхронизация, задержка, состояние воспроизведения, подсчет анимации, счетчик итераций, направление, режим заполнения и изменение.
В любом случае рассмотрели, как простая CSS-анимация работает достаточно подробно. Вы узнали все о том, как объявить анимацию с использованием свойства анимации и как работает правило @keyframes с его правилами стиля ключевого кадра. То, что мы видели, это всего лишь часть всего, что вы можете сделать с помощью анимации CSS
| | Страна: (RU) |
| |
| Kosten | Пятница, 29 Июня 2018, 02:06 | Сообщение 2 |
|
| В этой статье вы узнаете основы CSS анимации, которые позволяют постепенно изменять стиль элемента из одного состояния в другое. Это идеально, если вам просто нужна простая анимация, и вы хотите держаться подальше от JavaScript. Попробуйте сами экспериментировать с анимацией, чтобы вы правильно поняли, как работает эта технология.
Анимация - это процесс изменения формы и создания движений с элементами.
@keyframes
Keyframes будет управлять промежуточными шагами анимации в CSS.
Пример ключевых кадров с левой анимацией
Код @keyframes animation {
from {background-color: pink;}
to {background-color: green;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: animation;
animation-duration: 5s;
}
В приведенном выше примере показаны высота, ширина, цвет, имя и продолжительность анимации с синтаксисом ключевых кадров
Перемещение левой анимации
Код <html> <head> <style type="text/css"> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } to { margin-left:0%; width:100%; } } </style> </head> <body> <h1>Tutorials Point</h1> <p>this is an example of moving left animation .</p> <button onclick="myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </html>
Перемещение левой анимации с ключевыми кадрами
Код <html> <head> <style type="text/css"> h1 { -moz-animation-duration: 3s; -webkit-animation-duration: 3s; -moz-animation-name: slidein; -webkit-animation-name: slidein; } @-moz-keyframes slidein { from { margin-left:100%; width:300% } 75% { font-size:300%; margin-left:25%; width:150%; } to { margin-left:0%; width:100%; } } @-webkit-keyframes slidein { from { margin-left:100%; width:300% } 75% { font-size:300%; margin-left:25%; width:150%; } to { margin-left:0%; width:100%; } } </style> </head> <body> <h1>Tutorials Point</h1> <p>This is an example of animation left with an extra keyframe to make text changes.</p> <button onclick="myFunction()">Reload page</button> <script> function myFunction() { location.reload(); } </script> </body> </html>
Демонстрация
Если вы все еще не поняли, то просто помните, что ваши ключевые кадры не имеют понятия времени. У них есть только концепция процента. Свойство анимации с его значением продолжительности помогает создать недостающую связь между ключевыми кадрами и временем. Как только вы поймете все это, вы столкнетесь с серьезным препятствием, чтобы понять, что делает ваша анимация CSS.
| | Страна: (RU) |
| |
