Вредоносное ПО (malware) - это назойливые или опасные программы,...
CSS3 анимация достаточно широко используется. Пришла пора разобраться даже самым начинающих сайтостроителям что же такое CSS анимация и как ее создать. Возможно Вы думаете что CSS3 анимация заключается в том, чтобы заставить двигаться блоки и это похоже на мультфильм. Но CSS анимация это не только перемещение элемента из одной точки в другую, а это еще искажение и другие трансформации. Чтобы это было понятно даже для начинающих — я расписал всё по шагам.
1. Основные свойства CSS3 анимации
Небольшой теоретический блок, из которого Вы поймете какие свойства CSS 3 отвечают за анимацию, а также какие значения они могут принимать.
- animation-name — уникальное имя анимации (ключевых кадров, о них поговорим чуть ниже).
- animation-duration — длительность анимации в секундах.
- animation-timing-function — кривая изменения скорости анимации. На первый взгляд очень непонятно. Всегда легче показать на примере, а их Вы увидите ниже. Может принимать следующие значения: linear | ease | ease-in | ease-out | cubic-bezier(n,n,n,n) .
- animation-delay — задержка в секундах перед началом анимации.
- animation-iteration-count — количество повторов анимации. Задается либо просто числом, либо можно указать infinite и анимация будет выполняться бесконечно.
Здесь находятся лишь основные свойства, которых более чем достаточно, чтобы создать свою первую анимацию на CSS3.
Последнее, что нам нужно знать и понимать из теории — это то, как создавать ключевые кадры. Это делать также легко и делается это с помощью правила @keyframes , внутри которого указываются ключевые кадры. Синтаксис этого правила следующий:
Выше мы задали первый и последний кадр. Все промежуточные состояния рассчитаются АВТОМАТИЧЕСКИ!
2. Реальный пример анимации CSS3
Теория как обычно скучна и не всегда понятна. Намного проще увидеть всё на реальном примере, а лучше всего сделать своими руками на какой-нибудь тестовой HTML страничке.
При изучении языка программирования обычно пишут программу "Hello, world!", по которой можно понять какой синтаксис у этого языка и еще какие-нибудь базовые вещи. Но мы изучаем не язык программирования, а язык описания внешнего вида документа. Поэтому у нас будет свой "Hello, world!".
Вот что мы сделаем для примера:
пусть у нас какой-нибудь блок Вроде бы всё понятно — просто нужно сжать блок Сначала HTML разметка. Она очень простая, потому что мы работаем только с одним элементом на странице. А вот что находится в файле стилей: Как видите, мы указали только первый и последний ключевой кадр, а все промежуточные "построились" автоматически. Вот и готова Ваша первая CSS3 анимация. Чтобы закрепить полученные знания — создайте HTML документ и CSS файл, и там вставьте (а лучше руками напечатайте) код из примера. Тогда Вы уж точно всё поймете. Затем попробуйте сделать тоже самое с высотой блока (он должен уменьшаться по высоте), чтобы закрепить материал. Выше Вы узнали как можно легко создать CSS3 анимацию. Если попробовали своими руками это сделать, то уже поняли весь процесс и сейчас хотите узнать как можно создать более сложную и красивую анимацию. А ее создать действительно можно. Ниже есть 3 урока где анимация создается также, как в примере выше. 3 урока по анимации CSS (преобразования) Уроки помогут Вам понять анимацию CSS еще лучше. Главное — это пробовать повторять то, что Вы видите в уроках. Или хотя бы попробуйте изменять значения свойств и смотреть что получается, тогда Вы станете меньше боятся CSS. Здравствуйте, дорогие читатели . В этот день давайте поговорим о, довольно таки, интересной штуке как CSS анимация. То есть, эта анимация элементов делается только с помощью стилей и никакие скрипты тут не используются. Как видите здесь присутствует атрибут :hover
, который меняет стиль фона при наведении, в некоторых примерах он должен быть обязательно. padding: 10px; text-indent: 0px; #box1:hover
{ Как видите такую анимацию мы добились с помощью атрибута transition
. Здесь можно изменить скорость анимации в секундах, в данном случае стоит 0.8с до полного изменения цвета при наведении и 0.1с до того как сработает анимация после наведения и убирания курсора. (Извиняюсь за ребус:-)) Это значение можно изменять как Вам нужно. Цвет фона при наведении ставится атрибутом :hover
, он здесь обязательный, иначе анимация работать не будет. padding: 10px; text-indent: 0px; #box2:hover
{ В этом примере мы добились плавного изменения размера блока при наведении. Стандартная величина 200 на 100, а величина при наведении составляет 150 на 50, которая задаётся атрибутом :hover.
Ещё здесь можно изменить блок только по ширине или по высоте, нужно просто под :hover
удалить width:
— блок изменяется только по высоте, height:
— блок изменяется только по ширине. Также можно изменить скорость изменения. В данном случае это 1с. padding: 10px; text-indent: 0px; #box3:hover { Кручение происходит с помощью transform
и transition
. В данном случае объект крутится по часовой стрелке на 360 градусов со скоростью в одну секунду. Если нужно, чтобы блок крутился против часовой стрелки, в transform
значении нужно поставить -(минус). Естественно градус оборота можно изменять. text-indent: 0px; #box4:hover { В этом примере блок плавно увеличивается в 2 раза. Это значение выставляется transform: scale(2)
. Если поставить значение 1.5, соответственно увеличение блока будет в 1.5 раза. Этим же способом можно уменьшить размер
блока, например поставить значение 0.5. #box5 { text-indent: 0px; #box5:hover { Здесь перемещение задаётся в пикселах. В данном случае (0,50px). Так же можно заставить блок подниматься вверх этим значением 0,-50px. Или по диагонали вниз 50px,50px. Одним словом блок можно заставить смещаться куда угодно. Вот в принципе и всё, что хотелось сказать. Нет, не всё :-) Забыл напомнить о том, что эту CSS анимацию можно применять к любым объектам на сайте: к картинкам, тексту, заголовкам, иконкам и т.д. Вот для ссылок отлично подойдет плавное изменение цвета, по моему очень красиво. :-) И ещё, этой информацией поделился с нами сайт shpargalkablog.ru . За что ему огромное спасибо. Вот теперь точно все:-) До скорых встреч, друзья. В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной. В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны. Это примеры логотипов сделанных только на чистом CSS. Вы только вдумайтесь, при создании не использовались изображения. Это просто нечто. Отличный и художественный пример использования CSS в алфавите Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов. Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо. Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке. Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском. Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS. Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения. Пост о CSS формах с многочисленными примерами Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники. Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный. Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS. Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант Небольшое и качественное интернет приложение, с помощью которого Вы сможете создать красивые переключатели для использования на сайте. CSS библиотека бесплатных всплывающих подсказок — Hint.css Схемы цветов для людей, которые не любят копаться в коде Мы недавно видели, что переходы
- это просто способ анимации
стилевых свойств от исходного
до конечного
состояния. Итак, переходы в CSS являются специфическим
видом анимации, где: Но что если вы хотите: Анимация в CSS позволяет всё это, и не только. Анимация как мини-фильм, где вы в качестве режиссёра даёте инструкции (стилевые правила) вашим актёрам (элементам HTML) для разных сцен (ключевые кадры). Как и transition
, свойство animation
является сокращённым
для нескольких других: Для оживления кнопки загрузки, вы можете написать анимацию подпрыгивания
:
@keyframes bouncing{
0% { bottom: 0; box-shadow: 0 0 5px rgba(0,0,0,0.5); }
100% { bottom: 50px; box-shadow: 0 50px 50px rgba(0,0,0,0.1); }
}
.loading-button {
animation: bouncing 0.5s cubic-bezier(0.1,0.25,0.1,1) 0s infinite alternate both;
}
Сначала нужно написать реальную анимацию подпрыгивания с помощью @keyframes
и назвать её . Я использовал сокращенное
свойство animation
и включил все возможные варианты: Перед применением анимации к элементам HTML, вам требуется написать анимацию с помощью ключевых кадров
. Вообще, ключевые кадры - это каждый промежуточный шаг
в анимации. Они определяются с помощью процентов: Можно также использовать ключевые слова from
и to
вместо 0% и 100%, соответственно. Вы можете определить столько ключевых кадров, сколько хотите, вроде 33%, 4% или даже 29.86%. На практике вы будете писать только некоторые из них. Каждый ключевой кадр является правилом CSS
, это означает, что вы можете писать свойства CSS как обычно. Чтобы определить анимацию, просто напишите ключевое слово @keyframes
с его названием
:
@keyframes around {
0% { left: 0; top: 0; }
25% { left: 240px; top: 0; }
50% { left: 240px; top: 140px; }
75% { left: 0; top: 140px; }
100% { left: 0; top: 0; }
}
p { animation: around 4s linear infinite; }
Обратите внимание, что начало 0% и конец 100% содержат одинаковые правила
CSS. Это гарантирует, что анимация зациклится идеально. Поскольку счётчик итераций установлен как infinite
, то анимация будет идти от 0% до 100%, а затем немедленно обратно
к 0% и так бесконечно. Название
анимации используется, по крайней мере, дважды
: Подобно именам классов CSS, название анимации может включать в себя только: Название не может начинаться с цифры или с двух дефисов. Как и длительность перехода , длительность анимации может быть установлена в секундах
(1s) или миллисекундах
(200ms). Selector { animation-duration: 0.5s; }
Значение по умолчанию равно 0s, что означает отсутствие анимации вообще. Подобно функциям времени для переходов , функции времени для анимации могут использовать ключевые слова
, такие как linear
, ease-out
или могут быть определены с помощью произвольных кривых Безье
. Selector { animation-timing-function: ease-in-out; }
Значение по умолчанию: ease
. Поскольку анимация в CSS использует ключевые кадры, вы можете установить линейную
функцию времени и моделировать
конкретную кривую Безье, определяя множество очень специфичных
ключевых кадров. Посмотрите Bounce.js для создания передовой анимации. Как и с задержкой перехода , задержка анимации может быть установлена в секундах
(1s) или миллисекундах
(200ms). По умолчанию равно 0s, что означает отсутствие любой задержки. Полезно использовать, когда включается несколько анимаций в серии
. A, .b, .c { animation: bouncing 1s; }
.b { animation-delay: 0.25s; }
.c { animation-delay: 0.5s; }
По умолчанию, анимация воспроизводится только один раз
(значение 1). Вы можете установить три типа значений: Свойство animation-direction
определяет, в каком порядке
читаются ключевые кадры. Это легче представить, если счётчик итераций анимации установлен как infinite
. Свойство animation-fill-mode
определяет, что происходит перед
началом анимации и после
её завершения. При определении ключевых кадров
можно указать правила CSS
, которые будут применяться на разных шагах анимации. Теперь эти правила CSS могут столкнуться
с теми, которые уже применяются
к анимируемым элементам. animation-fill-mode позволяет сообщить браузеру, если стили анимации
также
должны применяться за пределами анимации
. Давайте представим себе кнопку
, которая является: Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before
и :after
IE:
10.0 Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи: Правило @keyframes
позволяет создавать анимацию с помощью ключевых кадров - состояний объекта в определенный момент времени. Ключевые кадры анимации создаются с помощью ключевых слов from
и to
(эквивалентны значениям 0% и 100%) или с помощью процентных пунктов, которых можно задавать сколько угодно. Также можно комбинировать ключевые слова и процентные пункты. Если не задан начальный (from
, 0%) или конечный (to
, 100%) кадр, браузер установит для них расчётные значения анимируемых свойств такими, какими они были бы если бы не была применена анимация. Если у двух ключевых кадров будут одинаковые селекторы, то последующий отменит действие предыдущего. При определении анимации сразу после свойства @keyframes
должно следовать имя данной анимации (данное имя затем должно быть указано в свойстве animation элемента, который будет анимирован). @keyframes move {
from {
transform: translateX(0px);
}
50% {
transform: translateX(130px);
}
100% {
transform: translateX(0px);
}
} @keyframes move
{
from
{
50%
{
100%
{
transform
:
translateX
(0px
)
;
Мы создали анимацию, которая работает следующим образом: Здесь и далее для удобства я написал в примерах несколько строчек JavaScript, которые будут поочередно добавлять или удалять класс с анимацией на элементе, поэтому для воспроизведения анимации просто кликните по этому элементу.
Ключевые кадры можно группировать: @keyframes move {
from {
transform: translateX(0px);
}
25%, 50% {
transform: translateX(130px);
}
100% {
transform: translateX(0px);
}
} @keyframes move
{
from
{
transform
:
translateX
(0px
)
;
25%, 50%
{
transform
:
translateX
(130px
)
;
100%
{
transform
:
translateX
(0px
)
;
Одному элементу можно назначить несколько анимаций, их имена и параметры надо писать в порядке присвоения: element {
animation-name: animation-1, animation-2;
animation-duration: 2s, 4s;
} element
{
animation-name
:
animation-1,
animation-2
;
animation-duration
:
2s,
4s
;
Подключение анимации к элементу происходит двумя командами — animation-name
и animation-duration
.
Свойство animation-name
задает имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно слово или несколько, связанных между собой при помощи пробела — или нижнего подчеркивания _. animation-name: move; Свойство animation-timing-function
позволяет задать специальную функцию, отвечающую за скорость воспроизведения анимации. Обратим внимание, что скорость воспроизведения анимации чаще всего нелинейная, т.е. ее мгновенная скорость в разных участках будет отличаться. На данный момент существует несколько уже встроенных аргументов для этого правила: ease
, ease-in
, ease-out
, ease-in-out
, linear
, step-start
, step-end
. Однако такие функции можно создавать самому. Специальная функция cubic-bezier (P1x, P1y, P2x, P2y);
принимает четыре аргумента и строит на их основе кривую распределения значений в процессе анимации. Потренироваться в создании своих функций и посмотреть как они работают можно на этом сайте . И, наконец, анимацию можно превратить в набор дискретных значений с помощью функции steps
(количество шагов, направление), в качестве аргументов которой задаётся количество её шагов и направление, которое может принимать значения start
или end
. Визуальное сравнение Свойство animation-delay
определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration
. Не наследуется. element {
animation-name: animation-1;
animation-duration: 2s;
animation-delay: 10s; // Перед стартом этой анимации пройдет 10 сек.
} Свойство animation-iteration-count
позволяет запустить анимацию несколько раз. Не наследуется. В качестве значения выставляем любое положительное значение 1, 2, 3 …
и т.д. либо infinite
для бесконечного повторения. Значение 0
или любое отрицательное число удаляют анимацию из проигрывания. 1
<div
class
=
"toSmallWidth"
>
div
>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.toSmallWidth
{
margin
:
20px
auto
;
/*внешние отступы сверху и снизу по 20px и выравнивание по середине*/
background
:
red
;
/*красный фон у блока*/
height
:
100px
;
/*высота блока 100px*/
width
:
800px
;
/*начальная ширина 800px*/
-webkit-animation-name
:
animWidthSitehere;
-webkit-animation-duration
:
5s;
/* свойство с префиксом для браузеров Chrome, Safari, Opera */
animation-name
:
animWidthSitehere;
/* указываем название ключевых кадров (находятся ниже)*/
animation-duration
:
5s;
/*задаем длительность анимации*/
}
/* ключевые кадры с префиксом для браузеров Chrome, Safari, Opera */
@-webkit-keyframes animWidthSitehere {
from {
width
:
800px
;
}
to {
width
:
100px
;
}
}
@keyframes animWidthSitehere {
from {
width
:
800px
;
}
/*первый ключевой кадр, где ширина блока 800px*/
to {
width
:
100px
;
}
/*последний ключевой кадр, где ширина блока 100px*/
}
3. Примеры анимации CSS3 посложнее
Плавное изменение цвета элемента при наведении с помощью transition
#box1 {
margin-bottom: 5px;
background-color: #ccc;
text-align: center;
width: 200px;
height:100px;
border: 1px solid #888;
-moz-transition: background-color 0.8s 0.1s ease;
-o-transition: background-color 0.8s 0.1s ease;
-webkit-transition: background-color 0.8s 0.1s ease;
cursor: pointer;}
background-color: #97CE68;
color: #333;
}Изменение размера элемента
#box2 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
text-align: center;
width: 200px;
height:100px;
border: 1px solid #888;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
cursor: pointer;}
background-color: #97CE68;
color: #000;
width: 150px;
height:50px;
}Кручение объекта
#box3 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
text-align: center;
width: 200px;
height:100px;
border: 1px solid #888;
-moz-transition: all 1s 0.1s ease-in;
-o-transition: all 1s 0.1s ease-in;
-webkit-transition: all 1s 0.1s ease-in;
cursor: pointer;}
background-color: #97CE68;
color: #000;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}Плавное увеличение и уменьшение объекта
#box4 {
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;
border: 1px solid #888;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-webkit-transition: all 3s ease-out;
cursor: pointer;}
background-color: #97CE68;
color: #000;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
}Плавное смещение блока вниз
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;
border: 1px solid #888;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
cursor: pointer;}
background-color: #97CE68;
color: #000;
-webkit-transform: translate(0,50px);
-moz-transform: translate(0,50px);
-o-transform: translate(0,50px);
}CSS 3D облака
Логотипы на чистом CSS
Алфавит с CSS анимацией
3D навигация для сайта
Дудл от Google на CSS
Слайдер
Двойное анимированное кольцо
Размытие на CSS
Полное руководство по Flexbox
Красочное и анимированное меню на CSS3
CSS фильтры
CSS формы
Прогресс бары на CSS
Анимация — Animate.css
Индикаторы загрузки — Spinkit
Кнопки
Генератор для создания переключателей
Всплывающие подсказки
Цветовые схемы
Свойства анимации
Быстрый пример
@keyframes
animation-name
@keyframes whatever {
/* ... */
}
.selector { animation-name: whatever; }
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
.selector { animation-iteration-count: infinite; }
animation-direction
animation-fill-mode
Поддержка браузерами
Firefox:
16.0, 5.0 -moz-
Chrome:
43.0, 4.0 -webkit-
Safari:
4.0 -webkit-
Opera:
12.1, 12.0 -o-
iOS Safari:
9, 7.1 -webkit-
Opera Mini:
-
Android Browser:
44, 4.1 -webkit-
Chrome for Android:
44Правило @keyframes
Название анимации
Временная функция
Анимация с задержкой
Повтор анимации