Мы недавно видели, что переходы - это просто способ анимации стилевых свойств от исходного до конечного состояния.
Итак, переходы в 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% и так бесконечно.
animation-nameНазвание анимации используется, по крайней мере, дважды :
Подобно именам классов CSS, название анимации может включать в себя только:
Название не может начинаться с цифры или с двух дефисов.
animation-durationКак и длительность перехода , длительность анимации может быть установлена в секундах (1s) или миллисекундах (200ms).
Selector { animation-duration: 0.5s; }
Значение по умолчанию равно 0s, что означает отсутствие анимации вообще.
animation-timing-functionПодобно функциям времени для переходов , функции времени для анимации могут использовать ключевые слова , такие как linear , ease-out или могут быть определены с помощью произвольных кривых Безье .
Selector { animation-timing-function: ease-in-out; }
Значение по умолчанию: ease .
Поскольку анимация в CSS использует ключевые кадры, вы можете установить линейную функцию времени и моделировать конкретную кривую Безье, определяя множество очень специфичных ключевых кадров. Посмотрите Bounce.js для создания передовой анимации.
animation-delayКак и с задержкой перехода , задержка анимации может быть установлена в секундах (1s) или миллисекундах (200ms).
По умолчанию равно 0s, что означает отсутствие любой задержки.
Полезно использовать, когда включается несколько анимаций в серии .
A, .b, .c { animation: bouncing 1s; } .b { animation-delay: 0.25s; } .c { animation-delay: 0.5s; }
animation-iteration-countПо умолчанию, анимация воспроизводится только один раз (значение 1). Вы можете установить три типа значений:
Свойство animation-direction определяет, в каком порядке читаются ключевые кадры.
Это легче представить, если счётчик итераций анимации установлен как infinite .
animation-fill-modeСвойство animation-fill-mode определяет, что происходит перед началом анимации и после её завершения.
При определении ключевых кадров можно указать правила CSS , которые будут применяться на разных шагах анимации. Теперь эти правила CSS могут столкнуться с теми, которые уже применяются к анимируемым элементам.
animation-fill-mode позволяет сообщить браузеру, если стили анимации также должны применяться за пределами анимации .
Давайте представим себе кнопку , которая является:
CSS3 анимация достаточно широко используется. Пришла пора разобраться даже самым начинающих сайтостроителям что же такое CSS анимация и как ее создать. Возможно Вы думаете что CSS3 анимация заключается в том, чтобы заставить двигаться блоки и это похоже на мультфильм. Но CSS анимация это не только перемещение элемента из одной точки в другую, а это еще искажение и другие трансформации. Чтобы это было понятно даже для начинающих — я расписал всё по шагам.
1. Основные свойства CSS3 анимацииНебольшой теоретический блок, из которого Вы поймете какие свойства CSS3 отвечают за анимацию, а также какие значения они могут принимать.
Здесь находятся лишь основные свойства, которых более чем достаточно, чтобы создать свою первую анимацию на CSS3.
Последнее, что нам нужно знать и понимать из теории — это то, как создавать ключевые кадры. Это делать также легко и делается это с помощью правила @keyframes , внутри которого указываются ключевые кадры. Синтаксис этого правила следующий:
Выше мы задали первый и последний кадр. Все промежуточные состояния рассчитаются АВТОМАТИЧЕСКИ!
2. Реальный пример анимации CSS3Теория как обычно скучна и не всегда понятна. Намного проще увидеть всё на реальном примере, а лучше всего сделать своими руками на какой-нибудь тестовой HTML страничке.
При изучении языка программирования обычно пишут программу "Hello, world!", по которой можно понять какой синтаксис у этого языка и еще какие-нибудь базовые вещи. Но мы изучаем не язык программирования, а язык описания внешнего вида документа. Поэтому у нас будет свой "Hello, world!".
Вот что мы сделаем для примера: пусть у нас какой-нибудь блок будет изначально с шириной 800px и за 5 секунд уменьшится до 100px.
Вроде бы всё понятно — просто нужно сжать блок и всё! Давайте посмотрим как это выглядит в действительности.
Сначала HTML разметка. Она очень простая, потому что мы работаем только с одним элементом на странице.
| 1 |
А вот что находится в файле стилей:
| 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*/ } |
Как видите, мы указали только первый и последний ключевой кадр, а все промежуточные "построились" автоматически.
Вот и готова Ваша первая CSS3 анимация. Чтобы закрепить полученные знания — создайте HTML документ и CSS файл, и там вставьте (а лучше руками напечатайте) код из примера. Тогда Вы уж точно всё поймете. Затем попробуйте сделать тоже самое с высотой блока (он должен уменьшаться по высоте), чтобы закрепить материал.
3. Примеры анимации CSS3 посложнееВыше Вы узнали как можно легко создать CSS3 анимацию. Если попробовали своими руками это сделать, то уже поняли весь процесс и сейчас хотите узнать как можно создать более сложную и красивую анимацию. А ее создать действительно можно. Ниже есть 3 урока где анимация создается также, как в примере выше.
3 урока по анимации CSS (преобразования)
Уроки помогут Вам понять анимацию CSS еще лучше. Главное — это пробовать повторять то, что Вы видите в уроках. Или хотя бы попробуйте изменять значения свойств и смотреть что получается, тогда Вы станете меньше боятся CSS.
Все чаще на многих landing page или промо-страничках, можно встретить различные эффекты анимации. Ведь они делают страницу более интересной и привлекательной.
В основном эти эффекты задают либо на какое-то событие (клик или наведение на элемент), либо же в момент прокрутки страницы. Я думаю вы встречали такие сайты, когда прокручивая страницу, различные элементы плавно и красиво появляются.
Раньше для реализации этих эффектов, приходилось использовать только лишь JS, но развитие не стоит на месте и с выходом CSS3 все эти эффекты можно реализовать на нем.
В данном уроке мы с вами познакомимся с очень интересным инструментом под названием animate.css . Это уже готовая CSS таблица стилей, которая в своем арсенале имеет свыше 50 различных эффектов и все эти эффекты реализованы на CSS3.
Чтобы использовать ее, вам достаточно для требуемого элемента задать определенный класс и к этому элементу будет применен эффект анимации. Как я и говорил ранее, данная анимация реализована на CSS3, поэтому эти эффекты будут работать во всех современных браузерах.
А теперь давайте более детально познакомимся с animate.css .
Базовая HTML разметкаСмотреть видеоурок
Если вы все сделали, как описано выше, то в момент загрузки страницы для элемента будет применен данный эффект и все, анимация на этом закончится.
Но что делать если вам нужно чтобы анимация продолжалась без остановки?
Для этого достаточно добавить еще один класс для нашего анимируемого элемента. Это класс – infinite .
Заголовок
Задаем анимацию при наведении мыши на элемент
Смотреть видеоурок
Все описанные ранее примеры, задают анимацию сразу же после загрузки страницы, но на практике это редко бывает нужно. На практике очень часто требуется задавать анимацию при наведении на элемент и поэтому ниже я привел готовый код данной реализации.
HTMLHTML разметка у нас немного поменялась, теперь нам не надо задавать класс, который отвечает за конкретную анимацию. Это значение нам нужно указывать в специальном атрибуте data-effect . Обратите на это внимание, это очень важно.
Заголовок
Вот небольшой код на jQuery , который будет отслеживать событие наведения курсора мыши на элемент и в случае возникновения данного события, скрипт добавит к нему класс, значение которого прописано в атрибуте data-effect . За счет добавления этого класса будет применена анимация.
Function animate(elem){ var effect = elem.data("effect"); if(!effect || elem.hasClass(effect)) return false; elem.addClass(effect); setTimeout(function(){ elem.removeClass(effect); }, 1000); } $(".animated").mouseenter(function() { animate($(this)); });
Естественно данный скрипт вы можете изменить как угодно, к примеру, вы можете поменять в нем событие mouseenter на click . Тогда в этом случае анимация будет происходить не в момент наведения мыши на элемент, а в момент клика.
Делаем анимацию при прокрутке страницыСмотреть видеоурок
Ну и напоследок давайте разберем еще один пример, где вы с легкостью можете применять animate.css .
А именно вы можете задавать различные эффекты для элементов при прокрутке страницы. Для этих целей помимо animate.css , нам потребуется еще специальный скрипт wow.js .
В данной подборке собраны самые лучшие и качественные CSS фишки. Тут Вы сможете встретить различные и удивительные демо примеры и техники от знаменитых верстальщиков и дизайнеров, которые стараются доказать, что сейчас возможно сделать практически всё только на чистом CSS. Так же Вы тут сможете встретить несколько уроков в которых подробно рассказывается как сделать подобное творение. Надеюсь, что эта подборка окажется Вам полезной.
CSS 3D облакаВ этом демо Вы сможете создавать и редактировать причудливые облака в 3D. Данные облака на CSS дают понять нам, что возможности веб технологий практически безграничны.
Это примеры логотипов сделанных только на чистом CSS. Вы только вдумайтесь, при создании не использовались изображения. Это просто нечто.
Отличный и художественный пример использования CSS в алфавите
Простая но очень стильная панель навигации для сайта, конечно же сделанная с помощью только CSS3. никаких изображений и скриптов.
Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации
Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.
Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS
Мне кажется очень нужный фильтр, тем более он сделан на чистом CSS. с помощью размытия можно привлечь внимание пользователя к определённой точке.
Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.
Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.
Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.
Пост о CSS формах с многочисленными примерами
Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.
Самый популярный проект CSS анимации в интернете на сегодняшний день. И наверное самый простой и качественный, и к тому же бесплатный.
Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.
Сейчас кнопками на CSS уже тяжело удивить, но это довольно достойный вариант
Небольшое и качественное интернет приложение, с помощью которого Вы сможете создать красивые переключатели для использования на сайте.
CSS библиотека бесплатных всплывающих подсказок — Hint.css
Схемы цветов для людей, которые не любят копаться в коде
У многих посетителей возник вопрос, как же на практике применять библиотеку Animate.css. В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.
1. Для начала следует скачать и подключить библиотеку. Есть три варианта.
2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса - animated и класс с названием эффекта, допустим fadeInDown (список всех эффектов и их названия смотрим ). Например, вы желаете добавить мерцание ко всем изображениям на странице. В HTML записываем следующее:
Если на сайте используется jQuery, то добавление классов упрощается и делается через JavaScript.
$(document).ready(function() { $("img").addClass("animated flash"); })
3. Сама анимация включается автоматически при загрузке страницы. Это удобно для всплывающих сообщений, призванных привлечь внимание пользователя (пример 1).
Пример 1. Всплывающее сообщение
Предупреждение .warning { background: #fc0; padding: 10px; border: 1px solid #000; } Зенитное часовое число оценивает экваториальный секстант!
Чтобы эффект срабатывал при наведении на элемент курсора мыши, придётся использовать JavaScript. В качестве примера рассмотрим картинки, которые двигаются при наведении на них курсора мыши. К тегу
добавляем класс animated
и подключаем jQuery (пример 2).
Пример 2. Галерея
Галерея
$(document).ready(function() {
$("img.animated").hover(function() {
$(this).addClass("bounce"); // Добавляем класс bounce
},
function() {
$(this).removeClass("bounce"); // Убираем класс
})})
В данном примере при наведении курсора на изображение с классом animated добавляется ещё один класс bounce ; если курсор убрать, то класс bounce также убирается.
4. Окончательно можно настроить анимацию по своему вкусу, изменив скорость анимации, а также задав время задержки через CSS. И то и другое не обязательно и применяется при необходимости.
Animated { -webkit-animation-duration: .6s; -o-animation-duration: .6s; -moz-animation-duration: .6s; animation-duration: .6s; -webkit-animation-delay: 1s; -o-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
