Как сделать плавную анимацию css
Плавная анимация объектов только с помощью CSS (5 примеров)
Здравствуйте, дорогие читатели блога. В этот день давайте поговорим о, довольно таки, интересной штуке как CSS анимация. То есть, эта анимация элементов делается только с помощью стилей и никакие скрипты тут не используются.
Возможно, когда то CSS анимация заменит всякие скрипты и JQuery плагины, но это будет далеко как не скоро, потому что ещё очень ограниченные возможности, а у JQuery скриптов они безграничны.
Единственный минус в том, что некоторые старые (не обновлённые) браузеры данный способ не поддерживают, а за ИЕ (Internet Explorer) я вообще молчу. Но в общем данная анимация в самых популярных браузерах работает на ура, тем более если используются специальные префиксы.
Кстати о префиксах, мы их будем использовать во всех примерах, так сказать, нужно страховаться:
Ну а теперь давайте всё рассмотрим подробнее.
В данном случае мы будем создавать самый обычный блок с разрешением 200 на 100 пикселей, а потом уже прикреплять к нему анимацию.
Обычный блок
HTML
Чтобы добавить такой блок на страницу, нужно просто добавить
#box <
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;
border: 1px solid #888;
cursor: pointer;
>
Как видите здесь присутствует атрибут :hover, который меняет стиль фона при наведении, в некоторых примерах он должен быть обязательно.
Плавное изменение цвета элемента при наведении с помощью transition
padding: 10px;
text-align: center;
width: 200px;
height:100px;
text-indent: 0px;
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;>
#box1:hover <
background-color: #97CE68;
color: #333;
>
Как видите такую анимацию мы добились с помощью атрибута transition. Здесь можно изменить скорость анимации в секундах, в данном случае стоит 0.8с до полного изменения цвета при наведении и 0.1с до того как сработает анимация после наведения и убирания курсора. (Извиняюсь за ребус 🙂 ) Это значение можно изменять как Вам нужно.
Цвет фона при наведении ставится атрибутом :hover, он здесь обязательный, иначе анимация работать не будет.
Изменение размера элемента
padding: 10px;
text-align: center;
width: 200px;
height:100px;
text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 1s linear;
-o-transition: all 1s linear;
-webkit-transition: all 1s linear;
cursor: pointer;>
#box2:hover <
background-color: #97CE68;
color: #000;
width: 150px;
height:50px;
>
В этом примере мы добились плавного изменения размера блока при наведении. Стандартная величина 200 на 100, а величина при наведении составляет 150 на 50, которая задаётся атрибутом :hover.
Ещё здесь можно изменить блок только по ширине или по высоте, нужно просто под :hover удалить width: — блок изменяется только по высоте, height: — блок изменяется только по ширине.
Также можно изменить скорость изменения. В данном случае это 1с.
Кручение объекта
padding: 10px;
text-align: center;
width: 200px;
height:100px;
text-indent: 0px;
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;>
#box3:hover <
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;
text-indent: 0px;
border: 1px solid #888;
-moz-transition: all 3s ease-out;
-o-transition: all 3s ease-out;
-webkit-transition: all 3s ease-out;
cursor: pointer;>
#box4:hover <
background-color: #97CE68;
color: #000;
-webkit-transform: scale(2);
-moz-transform: scale(2);
-o-transform: scale(2);
>
В этом примере блок плавно увеличивается в 2 раза. Это значение выставляется transform: scale(2). Если поставить значение 1.5, соответственно увеличение блока будет в 1.5 раза.
Этим же способом можно уменьшить размер блока, например поставить значение 0.5.
Плавное смещение блока вниз
#box5 <
margin-bottom: 5px;
background-color: #ccc;
color: #333;
padding: 10px;
text-align: center;
width: 200px;
height:100px;
text-indent: 0px;
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;>
#box5:hover <
background-color: #97CE68;
color: #000;
-webkit-transform: translate(0,50px);
-moz-transform: translate(0,50px);
-o-transform: translate(0,50px);
>
Здесь перемещение задаётся в пикселах. В данном случае (0,50px). Так же можно заставить блок подниматься вверх этим значением 0,-50px. Или по диагонали вниз 50px,50px. Одним словом блок можно заставить смещаться куда угодно.
Вот в принципе и всё, что хотелось сказать. Нет, не всё 🙂 Забыл напомнить о том, что эту CSS анимацию можно применять к любым объектам на сайте: к картинкам, тексту, заголовкам, иконкам и т.д. Вот для ссылок отлично подойдет плавное изменение цвета, по моему очень красиво. 🙂
И ещё, этой информацией поделился с нами сайт shpargalkablog.ru. За что ему огромное спасибо.
Вот теперь точно все 🙂 До скорых встреч, друзья.
Как создать плавную EASE-анимацию на CSS3
CSS3 позволяет элементам менять значения за определенный промежуток времени, анимировать изменения свойств вместо поднадоевшей статики и резких переходов. Возможности CSS3 дают вам свободу в создании желаемого дизайна.
Для успешного завершения практики по данной статье вам понадобится:
Скачать исходные файлы
Морфинг
Это значит, что при пересечении изображения квадрата курсором мыши, оно будет плавно превращаться в круг в течение одной секунды. Также, придадим радиус 50% для создания идеального круга при трансформации.
Наша разметка будет состоять из контейнера
Зададим изображениям размер 200 на 200 пикселей и белую границу толщиной в 10 пикселей. Также установим свойство radius в значение 15px для создания плавных углов.
Таким образом, перетекание одного стиля в другой при наведении курсора мыши будет осуществлено за 1 секунду.
Далее, добавим стили для состояния нахождения курсора мыши над элементом. Добавим белую границу в 10 пикселей и зададим border-radius в значение 50%, что даст нам идеальную фигуру круга при пересечении активной области курсором мыши.
Также добавим свечения с помощью box-shadow :
Смещение
Для смещения будем использовать эффект зуммирования. Мы расположим изображение внутри контейнера с белой границей и при наведении курсора мыши, будем его увеличивать.
Разметка та же что и в предыдущем примере, но теперь добавим класс zoom рядом с img в контейнере
В этом примере задание свойства overflow : hidden уже не требуется. Также, добавим box-shadow для создания эффекта свечения:
Позиционирование
В данном примере мы будем немного поворачивать изображение. Мы можем настроить угол поворота и скорость выполнения анимации.
Разметка по-прежнему остается той же, меняется лишь класс на tilt вместо img в предыдущем примере:
Добавим значение поворота на 10 градусов. Теперь, при нахождении курсора мыши над активной областью, изображение будет поворачиваться на 10 градусов вправо.
И наконец, добавим эффект свечения:
В данном примере, мы превратим цветное изображение в черно-белое, используя свойство webkit filter при наведении курсора мыши.
Свойство web filter это графическая операция, управляющая отображением элемента в документе. Это похоже на инструменты Photoshop для управления цветом.
Зададим значение свойства transition в all 1s и при наведении курсора мыши, изображение плавно обесцветится.
И вновь, разметка остается практически той же – заменяем только класс на color :
И, наконец, добавим box-shadow для создания эффекта свечения:
Просто добавьте значение внутри скобок.
Смазывание
Сепия
Сепия
Инвертирование
Насыщение цветом
Заключение
Переходы в CSS3 позволяют элементам плавно менять стили с одного на другой. Это очень полезно, если вы не сильны в программировании, но хотите создать плавный эффект. Советую вам поэкспериментировать со всеми возможными значениями анимации.
Плавная анимация перемещения с помощью CSS
Большая часть того, что приносит нам удовольствие в анимации, связано с перемещением по экрану различных объектов. hover эффекты CSS привлекают внимание пользователей к контенту, определенной части интерфейса и улучшают общее восприятие ресурса.
Перемещение может быть немного сумасшедшим, как это:
Your browser does not support inline frames or is currently configured not to display inline frames.
Перемещение может быть и не таким явным. Например, таким, которое возникает при наведении курсора мыши на один из квадратов на рисунке ниже:
Your browser does not support inline frames or is currently configured not to display inline frames.
Преобразование с помощью translate3d()
Функция translate3d принимает три аргумента, но сначала рассмотрим те, которые отвечают за перемещение содержимого по горизонтали и вертикали:
Аргумент Х задает перемещение по горизонтали, Y — по вертикали. Например, если вы хотите переместить содержимое на 20 пикселей вправо и вверх, функция translate3d должна выглядеть следующим образом:
Как видите, функция translate3d не особенно сложная. Далее мы рассмотрим, как использовать ее в анимации CSS для создания движения.
Переход
Чтобы использовать это свойство в переходе, нужно выполнить два этапа. Сначала необходимо указать transform в качестве свойства, которое должно отслеживать переход:
Определив переход, вы можете задать свойство transform с функцией translate3d :
Как показано в примере, приведенном в начале статьи, CSS hover эффект при наведении курсора мыши на любой из элементов приводит к смещению изображения вверх на 150 пикселей.
Анимация
В случае анимации, убедитесь, что ключевые кадры в @keyframes содержат свойство transform с translate3d :
Пример из статьи все о CSS-анимациях содержит все, что нужно, чтобы вы увидели, как работает CSS hover эффект для табличной верстки.
Не забывайте о префиксах
Переходы с помощью JavaScript
Фрагмент кода, который нужен для этого, выглядит следующим образом:
Ненужные вычисления
Аппаратное ускорение
Когда мы имеем дело с отображением элементов на экране, связанные с этим вычисления можно производить с помощью процессора или видеокарты. Но для создания CSS hover эффектов для табличной верстки лучше задействовать видеокарту:
Как насчет JavaScript?
Боже, благослови преобразования!
Причина, по которой transform является более производительным, заключается в том, что оно не затрагивают никакие другие элементы. Любые действия, которые вы выполняете, применяются только к одному элементу, и браузеру не нужно перестраивать все окно. Он модифицирует только ту часть экрана, которая содержит перемещающийся контент. Это не зависит от того, задействован GPU или нет.
CSS-анимация с помощью свойства transition
Свойство transition можно перевести, как переход, т.е. при анимации с помощью этого css-свойства в течение некоторого времени осуществляется плавный переход от начального к конечному значению выбранных для этого свойств.
hover-эффекты с помощью свойства transition
Чаще всего свойство transition применяется для создания hover-эффектов, или эффектов при наведении курсора мыши. Его суть заключается в том, что оно просчитывает изменения между свойствами, заданными для обычного состояния элемента, и при наведении на него курсора мыши, которое задается с помощью псевдокласса :hover. Это позволяет создавать различные красивости от плавного изменения цвета текста и фона на кнопках-ссылках до наплывающих блоков и сменяющихся картинок. Очень интересные эффекты можно получить, если использовать псевдоэлементы ::before и/или ::after.
Составляющие свойства transition
Свойство transition является составным (обобщенным, или универсальным), что значит, что оно состоит из ряда свойств, которые можно задавать по отдельности. Синтаксис его таков:
Из кода видно, что вы можете использовать 4 свойства. Рассмотрим эти css-свойства по отдельности:
Свойство transition-property
Возможные значения transition-property :
Ниже показан код, который меняет цвет фона у div с id=»tr-property» с салатного на желтый за 0.8 секунды.
Наведите на блок ниже
В свойстве transition-property можно указать несколько значений через запятую или использовать значение all (все свойства), которое является значением по умолчанию. Также свойство transition-property имеет значение none (ни одно из свойств), которое обычно применяют для отмены анимации, например на мобильных устройствах.
Рассмотрим пример, в котором нужно анимировать несколько свойств:
Наведите на блок ниже
Тот же самый пример можно было сократить, использовав в коде свойство all вместо перечисления нескольких свойств для анимации.
Наведите на блок ниже
Свойство transition-duration
Код примера для исследования свойства transition-duration таков:
Пример с разной длительностью анимации:
Наведите на блок ниже
Свойство transition-duration
Использование только свойства transition-duration при hover-эффекте:
Используем transition-duration
Свойство transition-timing-function
Варианты свойства transition-timing-function :
Суть использования графика заключается в том, что у нас по вертикальной оси отображен прогресс, т.е. разница в числовых значениях того свойства, которое изменяется в процессе анимации. По горизонтальной оси у нас показано время, в течение которого происходит переход.
В редакторе кода Brackets вы также можете воспользоваться перетягиванием одного или обоих маркеров курсором мыши или смещать его после выделения клавишами-стрелками. При изменении значения вы так же, как и в случае с Инспектором свойств, получаете функцию вида cubic-bezier :
Подробнее об основах изменения скорости можно почитать в этой статье.
В том случае, когда для элемента задается больше одного перехода, например, при наведении мы изменяем не только цвет текста элемента, но и цвет его границы и размер закругления границ, можно использовать разные функции для каждого свойства. В коде нужно указывать значения свойств и функций через запятую.
Свойство transition-timing-function
Example 1
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aliquam molestiae vitae possimus, nesciunt aliquid quaerat sint illum? Vel libero ducimus quidem nesciunt.
Example 2
Aspernatur assumenda culpa totam eligendi asperiores, nesciunt enim dignissimos ab perspiciatis, nisi saepe. Error et veniam natus magnam delectus nostrum corporis maiores!
Example 3
Architecto asperiores modi cum aliquid labore, quasi impedit quis velit similique adipisci sunt molestiae soluta at nam eligendi ad dignissimos temporibus.
CSS-анимации
CSS позволяет создавать простые анимации без использования JavaScript.
JavaScript может быть использован для управления такими CSS-анимациями. Это позволяет делать более сложные анимации, используя небольшие кусочки кода.
CSS-переходы
Идея CSS-переходов проста: мы указываем, что некоторое свойство должно быть анимировано, и как оно должно быть анимировано. А когда свойство меняется, браузер сам обработает это изменение и отрисует анимацию.
Всё что нам нужно, чтобы начать анимацию – это изменить свойство, а дальше браузер сделает плавный переход сам.
Например, CSS-код ниже анимирует трёх-секундное изменение background-color :
Нажмите кнопку ниже, чтобы анимировать фон:
Существует 4 свойства для описания CSS-переходов:
Например, у этой кнопки анимируются два свойства color и font-size одновременно:
Теперь рассмотрим каждое свойство анимации по отдельности.
transition-property
Анимировать можно не все свойства, но многие из них. Значение свойства all означает «анимируй все свойства».
transition-duration
transition-delay
Здесь приведён пример анимации, сдвигающей цифры от 0 до 9 с использованием CSS-свойства transform со значением translate :
Свойство transform анимируется следующим образом:
Если вы нажмёте на цифру ниже, то анимация начнётся с последней секунды:
JavaScript делает это с помощью нескольких строк кода:
transition-timing-function
Временная функция описывает, как процесс анимации будет распределён во времени. Будет ли она начата медленно и затем ускорится или наоборот.
На первый взгляд это очень сложное свойство, но оно становится понятным, если уделить ему немного времени.
Это свойство может принимать два вида значений: кривую Безье или количество шагов. Давайте начнём с кривой Безье, как с наиболее часто используемой.
Кривая Безье
Временная функция может быть задана, как кривая Безье с 4 контрольными точками, удовлетворяющими условиям:
Временная функция описывает то, насколько быстро происходит анимации во времени.
Вот как выглядит эта «кривая»:
В примере ниже поезд «едет» слева направо с одинаковой скоростью (нажмите на поезд):