| Kosten | Суббота, 17 Февраля 2018, 17:55 | Сообщение 1 |
| Думаю многие заметили, что анимация на интернет ресурсах, стало больше появляться, не исключая, какая тематика сайта, что безусловно можно сказать, что такой формат становится более актуальный. Где анимация может быть в онлайн, где она станет одной из ключевых тенденций для стилистики 2018 года. По всему миру уже не секрет, что используют анимацию на CSS, тем самым, делают свой портал более привлекательным для своих пользователей и гостей сайта.
CSS анимация предоставляет простой способ разработки анимации, для страницы, который не требует сложного кодирования или языка сценариев, такого как JavaScript. Хотя возможности анимации CSS не столь обширны, как JavaScript, все еще многое можно сделать с помощью CSS. Анимация позволяет вам переходить стиль элемента или группы элементов в течение определенного периода времени. Как долго эта продолжительность и какие стили используются, полностью зависит от разработчика. Для создания анимации CSS существует всего два основных ключа.
Сначала нужно определить элемент, который нужно анимировать, и его свойства. Кроме того, под элементы анимации, такие как имя анимации, продолжительность и направление, должны быть определены внутри элемента. После этого должно быть определено правило @keyframes, которое содержит свойства и значения стиля. Имя @keyframe совпадает с именем, присвоенным имени анимации внутри элемента. Псевдокод выглядит примерно так:
Хотя можно выписать каждое свойство и значение анимации, это необязательно.
Код animation-name: my_animation;
animation-duration: 5s;
animation-direction: alternate;
Вы можете просто написать:
Код animation: my_animation 5s alternate;
Для начала каждое правило @keyframe должно иметь уникальное имя:
Код @keyframes animation-name{ }
Это имя используется в стилях элемента в свойстве animation:
Код .element {
animation: animation-name;
}
В кейфрейме задаются правила, выраженные в процентах.
Во время анимации недели пять анимационных кругов с ярлыками, обозначающими каждый рабочий день недели с понедельника по пятницу, анимированные. Сначала создается элемент div, который определяет свойства пяти кругов и их текстовых меток. Свойство анимации используется для установки имени «daysoftheweek» длительности до пяти секунд, счетчик итераций бесконечен и направление, которое нужно чередовать. После этого функция анимации «легкость» и конкретная задержка назначаются каждому кругу.
Затем правило @keyframes записывается для определения того в какие стили будут перемещаться свойства. Как вы видите в коде несколько анимация происходит одновременно. Определены семь свойств, которые изменяют стили в блоке 'from' и 'to'. Круги настроены на перемещение по странице при изменении цвета и формы. Размер шрифта текста уменьшается до тех пор, пока он не исчезнет, когда круг перемещается по странице. Также тень коробки устанавливается на переход от видимого к невидимому.
HTML
Код <!DOCTYPE html> <html> <head> </head> <body> <p>ZorNet: Создание сайта на uCoz</p> <div id="div1">Z</div> <div id="div2">O</div> <div id="div3">R</div> <div id="div4">N</div> <div id="div5">E</div> </body> </html>
CSS
Код p{
font-size:29px;
font-style:italic;
text-align:center;
}
div {
width: 70px;
height: 70px;
border-radius: 41px;
background-color: #ca8c1c;
box-shadow: 12px 9px 7px #5d5656;
font-weight: bold;
font-size: 39px;
position: relative;
animation: daysoftheweek 5s infinite alternate;
}
/*Apply timing function and delay*/
#div1 {animation-timing-function: ease; animation-delay:0.5s}
#div2 {animation-timing-function: ease; animation-delay:1s}
#div3 {animation-timing-function: ease; animation-delay:1.5s}
#div4 {animation-timing-function: ease; animation-delay:2s}
#div5 {animation-timing-function: ease; animation-delay:2.5s}
/* Keyframe */
@keyframes daysoftheweek {
from {left: 0px; background-color:orange; width:85px; height: 85px; border-radius:38px; font-size:29px; box-shadow: 15px 10px 5px #888888;}
to {left: 295px; background-color:blue; width:49px; height: 50px; border-radius: 25px; font-size:0px; box-shadow: 0px 0px 0px #888888;}
}
Можно посмотреть, что получилось.
Демонстрация:
Существуют различные вспомогательные свойства анимации, которые позволяют создавать интересные эффекты. Ниже перечислены наиболее часто используемые.
animation-duration: Это позволяет определить, как долго один цикл вашей анимации.
animation-delay: Это позволяет вам настроить анимацию на задержку. Если вы установили задержку на 1 секунду, элемент, который находится на задержке, запустится и закончится на 1 секунду позже остальных элементов.
animation-iteration-count: указывает, сколько раз воспроизводится анимация. Чтобы воспроизвести анимацию, на неопределенное время установите это свойство бесконечности.
Анимация может иметь четыре возможных направления: нормальный, обратный и альтернативный. В нормальном режиме анимация всегда пере запускает каждый цикл в одной и той же точке и играет вперед. В обратном случае он делает то же самое, но наоборот. Для альтернативы анимация воспроизводит один цикл вперед и один цикл в обратном порядке и чередуется между ними. Альтернативное обратное - это то же самое, за исключением того, что оно начинается назад.
animation-timing-function: Эта функция имеет набор предопределенных значений, которые задают скорость анимации. Значения - это легкость, линейность, непринужденность, непринужденность и простота в использовании. Существует также кубическая функция Безье, которая позволяет вам указать свои собственные значения.
Вывод:
CSS анимация позволяет создавать простые, быстрые анимации, которые повышают качество веб страницы и контента. С помощью анимации CSS вы можете добавить удовольствие, элегантность и вибрацию на свою страницу, не изучая JavaScript, также создавая сложный, отлаживаемый код. Анимации также хорошо работают практически во всех браузерах. Проблемы с совместимостью редки с анимацией CSS, что не всегда происходит с анимацией, что созданы на других языках.
| | Страна: (RU) |
| |
