Плавная анимация перемещения с помощью CSS. Плавная анимация объектов только с помощью CSS (5 примеров)
CSS3 анимация достаточно широко используется. Пришла пора разобраться даже самым начинающих сайтостроителям что же такое CSS анимация и как ее создать. Возможно Вы думаете что CSS3 анимация заключается в том, чтобы заставить двигаться блоки и это похоже на мультфильм. Но CSS анимация это не только перемещение элемента из одной точки в другую, а это еще искажение и другие трансформации. Чтобы это было понятно даже для начинающих — я расписал всё по шагам.
1. Основные свойства CSS3 анимации
Небольшой теоретический блок, из которого Вы поймете какие свойства CSS3 отвечают за анимацию, а также какие значения они могут принимать.
- 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 фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной. В этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны. Это примеры логотипов сделанных только на чистом CSS. Вы только вдумайтесь, при создании не использовались изображения. Это просто нечто. Отличный и художественный пример использования CSS в алфавите Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов. Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо. Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке. Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском. Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS. Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения. Пост о CSS формах с многочисленными примерами Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники. Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный. Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS. Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант Небольшое и качественное интернет приложение, с помощью которого Вы сможете создать красивые переключатели для использования на сайте. CSS библиотека бесплатных всплывающих подсказок — Hint.css Схемы цветов для людей, которые не любят копаться в коде | 18.02.2016 CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript. Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам. Для более детального ознакомления вы можете скачать архив с файлами.
Все эффекты работают с помощью свойства transition (англ. transition
- «переход», «превращение») и псевдокласса:hover , который определяет стиль элемента при наведении на него курсора мыши ( в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды. Body > div {
width: 500px;
height: 309px;
background: #6d6d6d;
-webkit-transition: all 0.3s ease;;
-moz-transition: all 0.3s ease;;
-o-transition: all 0.3s ease;;
transition: all 0.3s ease;
}
Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок: Color:hover {
background:#53ea93;
}
Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет: Border:hover {
box-shadow: inset 0 0 0 23px #53ea93;
}
Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали: Эффект плавного затухания - это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 - то есть полная непрозрачность, после чего указать её значение при наведении мыши - 0.6: Fade {
opacity: 1;
}
.fade:hover {
opacity: 0.6;
}
Для противоположного результата поменяйте значения местами: Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций: Grow:hover {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
}
Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера: Shrink:hover {
-webkit-transform: scale(0.7);
-ms-transform: scale(0.7);
transform: scale(0.7);
}
Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем: Circle:hover {
border-radius: 70%;
}
Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z: Rotate:hover {
-webkit-transform: rotateZ(20deg);
-ms-transform: rotateZ(20deg);
transform: rotateZ(20deg);
}
Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей): Threed:hover {
box-shadow:
1px 1px #53ea93,
2px 2px #53ea93,
3px 3px #53ea93,
4px 4px #53ea93,
5px 5px #53ea93,
6px 6px #53ea93,
7px 7px #53ea93;
-webkit-transform: translateX(-7px);
transform: translateX(-7px);
}
На сегодняшний день свойство transition поддерживается следующими браузерами: Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность. Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!
Здравствуйте, дорогие читатели . В этот день давайте поговорим о, довольно таки, интересной штуке как 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 . За что ему огромное спасибо. Вот теперь точно все:-) До скорых встреч, друзья. Результат данного урока работает в браузерах Safari, Chrome, Opera, Firefox, начиная с версии 4 (где увидите трансформации, но без анимации). Также, с помощью браузерного префикса -ms-, вы сможете увидеть положительные результат в IE, начиная с 9ой версии. Для реализации CSS анимации необходимо выставить специальные настройки трансформации, которые будут реагировать на события мыши. Также необходимо указать специальную функцию, которая будет отвечать за время выполнения анимации. Для работы трансформаций в Firefox и Opera просто замените префикс -webkit на -moz и -o. Для IE - на -ms. CSS трансформации используют для изменения вида, поворота и других преобразований элемента. Все эти настройки выставляются в обычных таблицах стилей, и когда вы открываете страницу, то уже видите готовый результат трансформации. Для того чтобы увидеть само преобразование из одного вида в другой (анимацию трансформации), к элементу можно прикрутить какое-то событие (например, событие mouseover); В примере, указанном ниже, мы расположили 4 абсолютно одинаковых div-а с рамкой в 2px. Для трансформации данных элементов в браузерах, работающих на webkit, добавляем префикс -webkit-transform: Без данных трансформаций div-ы будут выглядеть абсолютно одинаково. Для анимации трансформаций в Webkit браузерах можно воспользоваться префиксом -webkit-transition. Демонстрация представлена ниже: Перед вами 4 одинаковых div-а. Для запуска анимации необходимо подвести/отвести мышь. При всём при этом, никакого JavaScript. Только HTML и CSS. CSS анимация может применяться не только к трансформациям, но также и к другим свойствам, таким как прозрачность, цвет и многое другое. Это продемонстрировано в следующем примере. Один элемент преобразуется в другой и наоборот: Опять же, мы используем только HTML и CSS. В данном случае, изменяем настройки border-color, border-radius. Для применения множественных трансформаций к одному и тому же элементу просто перечислите настройки через пробел. К примеру: Данные настройки при наводке мыши за 1 секунду изменят цвет под-меню, повернут его, увеличат в размере. Вот ещё один интересный пример комбинирования различного рода трансформаций в одной анимации: Данный пример может работать не очень хорошо в Safari 3 и в ранних версиях Opera. Блок, окружённый точечной рамкой, который появляется во время проигрывания анимации, отображает позицию элемента div. Его мы просто смещаем, а его содержание поворачиваем. Всё просто! Для создания более сложной анимации, необходимо воспользоваться специальными ключевыми кадрами . В этом примере, мы добавим несколько преобразований элемента, каждый из которых будет проигран в указанный промежуток времени. При событии:hover, синий квадрат, повернётся, поменяет цвет на красный, и передвинется из верхнего левого угла в правый нижний. Первое, что вы наверное должны были заметить, так это особенность передвижения квадрата. Теперь оно не резкое, а более “изогнутое”. Всё благодаря функциям ease-out и ease-in. Также обратите внимание, что изменение цвета происходит до поворота. Фишка в том, что вы можете разбить -webkit-transition на несколько записей: #block {
...
background: blue;
...
-webkit-transition-property: left, top, background, -webkit-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s;
...
}
#stage:hover #block {
left: 100px;
top: 100px;
background: red;
-webkit-transform: rotate(360deg);
} Многих наверное заинтересует подобный функционал: клик на один элемент вызывает преобразование другого. В CSS этого можно достичь, воспользовавшись селекторами >, + и ~. Вот и соответствующий пример: В этом примере мы воспользовались знаком +, чтобы взаимодействовать с #box1 и #box2. ~ может использоваться для получения доступа к элементам, которые находятся где-то далеко от элемента, ожидающего события. #box2 {
position: absolute;
left: 120px;
...
background: blue;
...
}
#box1:hover + #box2 {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
left: 627px;
background: yellow;
} В то же время, мы можем анимировать и первый блок: Недостаток данных примеров только в том, что они не работают (или работают криво) в более ранних версиях браузеров. Спасибо Niall за предложенный урок! 1
<div
class
=
"toSmallWidth"
>
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 посложнее
CSS 3D облака
Логотипы на чистом CSS
Алфавит с CSS анимацией
3D навигация для сайта
Дудл от Google на CSS
Слайдер
Двойное анимированное кольцо
Размытие на CSS
Полное руководство по Flexbox
Красочное и анимированное меню на CSS3
CSS фильтры
CSS формы
Прогресс бары на CSS
Анимация — Animate.css
Индикаторы загрузки — Spinkit
Кнопки
Генератор для создания переключателей
Всплывающие подсказки
Цветовые схемы
1. Изменение цвета при наведении курсора
2. Появление рамки
3. Свинг
@-webkit-keyframes swing {
15% {
-webkit-transform: translateX(9px);
transform: translateX(9px);
}
30% {
-webkit-transform: translateX(-9px);
transform: translateX(-9px);
}
40% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
50% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
65% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes swing {
15% {
-webkit-transform: translateX(9px);
transform: translateX(9px);
}
30% {
-webkit-transform: translateX(-9px);
transform: translateX(-9px);
}
40% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
50% {
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
65% {
-webkit-transform: translateX(3px);
transform: translateX(3px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.swing:hover {
-webkit-animation: swing 0.6s ease;
animation: swing 0.6s ease;
-webkit-animation-iteration-count: 1;
animation-iteration-count: 1;
}
4. Затухание
5. Увеличение
6. Уменьшение
7. Трансформация в круг
8. Вращение
9. 3D тень
Поддержка браузерами
Десктопные браузеры
Internet Explorer
Поддерживается версией IE 10 и выше
Chrome
Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-)
Firefox
Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-)
Opera
Поддерживается с версии 12.1
Safari
Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-)
Плавное изменение цвета элемента при наведении с помощью 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);
}1. Введение в CSS трансформации
2. Анимация
4. Множественные трансформации на одном элементе
4. Анимация в действии
5. Использование различных видов анимации
6. Событие одного элемента преобразует другой
