Мы принимаем к оплате:

«Подарочный сертификат» от нашего Учебного Центра – это лучший подарок для тех, кто Вам дорог! Оплате обучение и подарите Вашим родным и близким обучение по любому из курсов!!!

«Сертификат на повторное обучение» дает возможность повторно пройти обучение в нашем Учебном Центре со скидкой 1000 рублей!

А также:


Анимация в css


CSS анимации. 30 крутых примеров

Крутые CSS анимации

CSS Анимация загрузки от patrikhjelm

Семь анимированных точек двигаются влево и вправо, показывая загрузку.

See the Pen CSS loading animation by Patrik Hjelm (@patrikhjelm) on CodePen.

Анимированные иконки корзин от jonitrythall

Симпатичные анимированные эффекты, которые можно использовать на сайтах интернет- магазинов при добавлении товаров в корзину.

See the Pen Animated Shopping Cart Icons by Joni Trythall (@jonitrythall) on CodePen.

Анимация иконки «гамбургер» с помощью CSS3 анимаций от Dawid Krajewski

Создан на чистом CSS, без использования каких либо скриптов на JS.

See the Pen Hamburger Icon CSS3 ONLY Animation by Dawid Krajewski (@DawidKrajewski) on CodePen.

Анимированный персонаж 404 от With An Es Классный пример для 404 страницы, где разработчик работает на ошибками.

See the Pen 404 Animated Character by Mark Thomes (@WithAnEs) on CodePen.

Высадка на марс от mgitch Приземление на Марс. Сделано на CSS.

See the Pen CSS Mars Landing by Mathew Gitchell (@mgitch) on CodePen.

Мстители от mariosmaselli Герои-Мстители на CSS прямо на вашем сайте. Круто, не правда ли?

See the Pen CSS The Avengers by mario sanchez maselli (@mariosmaselli) on CodePen.

Переключатель День/Ночь от jsndks Теперь вы можете переключать день и ночь с CSS. Гениальная идея.

See the Pen Pure CSS Day/Night Toggle Swith by Jason Dicks (@jsndks) on CodePen.

Анимация Google Now приложений от codecalm Сторонние приложения от Google Now, теперь анимированы.

See the Pen Google Now 3rd Party Apps by Paweł Kuna (@codecalm) on CodePen.

Бегущий петух от judag

See the Pen clo clo by Judith Neumann (@judag) on CodePen.

Анимированная иконка меню от mariusbalaj Простая идея анимированной иконки, которая меняется при прокрутке страницы.

See the Pen Menu icon animation (updated) by Marius Balaj (@mariusbalaj) on CodePen.

Еще один CSS загрузчик от Maseone Гипнотизирует, не так ли?

See the Pen CSS preloader! by Paul (@Maseone) on CodePen.

Кнопка отправки от auginator Кликните для потдверждения, и кнопка анимируется с загрузкой процесса, с показом результата.

See the Pen Submit Button (GSAP edition) by auginator (@auginator) on CodePen.

Эластичный SVG сайдбар в стиле Material Design от suez Перетащите белую полосу вправо, чтобы увидеть эластичный эффект боковой панели.

See the Pen Elastic SVG Sidebar Material Design by Nikolay Talanov (@suez) on CodePen.

Кнопка с частицами от igcorreia Удивительный эффект при наведении на кнопку.

See the Pen Particle Button made with Canvas and HTML5 #html5 #button #particle #css @codepen @igcorreia Check this by Ignacio Correia (@igcorreia) on CodePen.

Gooey кнопка от Lucas Bebber

See the Pen CSS Gooey Menu (Version 1) by Lucas Bebber (@lbebber) on CodePen.

Вращающаяся кнопка от hakimel Кнопка с эффектом модального окна.

See the Pen Flipside by Hakim El Hattab (@hakimel) on CodePen.

Меню с настоящим гамбургером от CharlesSmart Настоящий деликатес в меню.

See the Pen The ultimate hamburger menu by Charles (@CharlesSmart) on CodePen.

Мотоцикл от yy Посмотрите на движущийся мотоцикл.

See the Pen Cruisin’ by Yusuf (@yy) on CodePen.

3D волна с помощью кубов от waddington

See the Pen 3d css cube wave by Kai Waddington (@waddington) on CodePen.

Эффект написания текста от drygiel Вот подпись которая реализована не на GIF формате, а PNG анимации с CSS3.

See the Pen Signature animation by Damian Drygiel (@drygiel) on CodePen.

Градиентная анимация заднего фона от quasimondo

See the Pen Animated Background Gradient by Mario Klingemann (@quasimondo) on CodePen.

Иконка переключения на «световых мечах» из Звездных войн от rss

See the Pen Star Wars Toggle Icon Animation by Rıza Selçuk Saydam (@rss) on CodePen.

Подобие GIF анимации от jascha Посмотрите как фото появляется из пикселей.

See the Pen Gif Style CSS3 Animation by Jascha Goltermann (@jascha) on CodePen.

Анимация для формы от fluxus Анимированный карандаш появляется, когда текстовая форма в фокусе.

See the Pen Simple focus in/out input animation by Mirko Zorić (@fluxus) on CodePen.

Разноцветный треугольник от felpedefarias Невероятная оптическая иллюзия, реализованная на CSS3.

See the Pen Chromatic triangle by felipedefarias (@felipedefarias) on CodePen.

Кофе-машина от thisisroger

See the Pen Coffee Maker Animation by Roger Flanagan (@thisisroger) on CodePen.

Анимированный динозавр Google Chrome от nickspiel Помните того динозаврика, которого вы можете увидеть когда соединение отсутствует в популярном браузере?

See the Pen Chrome Dinosaur Animation by Nick Spiel (@nickspiel) on CodePen.

CSS тряска от elrumordelaliz Наведите курсор, чтобы посмотреть эффект тряски на объектах.

See the Pen presenting CSShake by Lionel T (@elrumordelaluz) on CodePen.

Колыбель Ньютона от All Things Smitty Шикарная идея, для показа загрузки.

See the Pen Newton’s Cradle Loader by Matt Smith (@AllThingsSmitty) on CodePen.

Анимация для модального окна от koolhaus

See the Pen Modal Animation Physics by Tey Tag (@koolhaus) on CodePen.

Шагающий робот от P233 Этот робот идет, и идет, и идет…

See the Pen 3D walking robot by Peiwen Lu (@P233) on CodePen.

Анимация для стрелок навигации страниц от Hakim

See the Pen Flexing pagination arrows by Hakim El Hattab (@hakimel) on CodePen.

Источник: http://www.hongkiat.com/

Анимация

Устанавливает время ожидания перед воспроизведением анимации.

Универсальное свойство, которое определяет эффект перехода между двумя состояниями элемента, они могут быть установлены с помощью псевдоэлемента :hover или :active, а также динамически через JavaScript.

Устанавливает время ожидания перед запуском эффекта анимации перехода.

Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения.

Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.

Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.

Анимация в CSS

Анимация в CSS оживляет страницу

Анимация в CSS — очень интересная возможность для создания подвижных фрагментов на сайте. Двигать (а также менять цвет, размеры и т.д.) можно при помощи свойств начинающихся на animate-property, где вместо property подставляется одно из слов: name, duration, timing-function, iteration-count, direction, play-state, delay, fill-mode. Но можно записать сокращенный формат animation, описав все внутри. Почти как background. CSS анимация позволяет менять значения свойств, например можно изменить цвет элемента и поменять его расположение.

Значения анимационных свойств

  • animation-name название анимации. Текстовое произвольное обозначение ссылающееся на набор анимационных кадров — keyframes
  • animation-duration продолжительность анимации
  • animation-timing-function временная функция. Зависимость скорости анимации от времени
  • animation-iteration-count количество повторений анимационного эффекта
  • animation-direction направление
  • animation-play-state для указания паузы
  • animation-delay задержка перед началом анимации
  • animation-fill-mode режим заполнения
  • animation сокращенное название CSS-свойства

Анимация будет применена к элементу, если у него прописано свойство animation-name, связанное с правильно записанными кадрами (keyframes) анимации. В нем можно указать ссылки на несколько анимаций, разделив названия запятой. Также в названии можно использовать дефис  (animation-name: move или animation-name: leap—towards)

Пример перемещения (jsfiddle)

.el { position: absolute; width: 100px; height: 100px; background-color: #369; animation-name: move; /* такое же название указано ниже в наборе кадров */ animation-duration: 5s; /* анимация будет длиться 5 секунд */ animation-iteration-count: 7; /* количество повторений равно 7 */ } @keyframes move{ /* всего два кадра: начальное и конечное положение очень похоже на transition */ from { left: 0; /* начальная позиция */ background-color: #ff9; border-radius: 0; } to { left: 200px; /* конечная позиция */ background-color: #706367; border-radius: 100%; } }

Внутри директивы @keyframes описывается начальное состояние анимируемого элемента, промежуточные и конечное. В примере выше, указаны только начальный и конечный кадры. При необходимости промежуточные кадры добавляются указанием расположения в анимации через проценты. Вместо from {} пишется 0% {}, потом идут  30% {} и другие фрагменты; последний кадр 100% {}. В фигурных скобках указываются CSS-свойства для анимации. Изменим в нашей анимации move содержимое фреймов на следующее:

@keyframes move{ 0% { /* вместо from */ left: 0; background-color: #ff9; border-radius: 0; } 25% { /* один из промежуточных кадров */ left: 200px; top: 0; background-color: #706367; border-radius: 100%; } 50% { left: 200px; top: 200px; background-color: #f63; border-radius: 50%; } 75% { left: 0px; top: 200px; background-color: #ff9; border-radius: 20%; } 100% { left: 0px; top:  0px; background-color: #ff9; border-radius: 0%; }

Теперь элемент совершает движения по периметру квадрата, при этом меняет цвет и радиус закругления бордюра. animation-timing-function позволяет определить будет ли двигаться элемент равномерно или с ускорением в начале анимации или в конце ее. animation-timing-function: ease-out внутри фрейма говорит нам, что при ближе к завершению кадра анимация замедлится, значение ease-in — наоборот показывает, что медленным будет старт анимации.  Подробно узнать о временных функциях можно посмотрев раздел работы с transition .

animation-duration позволяет указать продолжительность анимации в секундах или миллисекундах. Например, animation-duration: 10s или animation-duration: 250ms.  animation-iteration-count — количество повторений анимации; задается целым числом или словом infinity для бесконечного количества повторений. animation-fill-mode позволяет указать будут ли свойства первого фрейма анимации выполнены до начала анимации или нет.

CSS3 — анимация

Все современные браузеры, кроме IE9- поддерживают CSS transitions и CSS animations, которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript. Анимация применяется к любым html-элементам, а также к псевдоэлементам :before и :after

Поддержка браузерами
IE: 10.0 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

Чтобы воспользоваться анимацией в своём проекте, вам достаточно сделать две вещи:

  1. Создать саму анимацию c помощью ключевого слова @keyframes
  2. Подключить её к элементу, который надо анимировать, и указать нужные свойства.

Правило @keyframes

Правило @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); } }
    transform: translateX(0px);    transform: translateX(130px);    transform: translateX(0px);

Мы создали анимацию, которая работает следующим образом:

  1. Начало анимации (from можно было написать 0%) — положение элемента по оси Х равно 0px;
  2. Середина анимации (50%) — положение элемента по оси Х равно 130px;
  3. Конец анимации (to мы использовали 100%) — возвращаем элемент на начало анимации, т.е. положение элемента по оси Х равно 0px;

See the Pen ONgOQY by Aleksei (@AmateR) on CodePen.0

Здесь и далее для удобства я написал в примерах несколько строчек JavaScript, которые будут поочередно добавлять или удалять класс с анимацией на элементе, поэтому для воспроизведения анимации просто кликните по этому элементу.

Ключевые кадры можно группировать:

@keyframes move { from { transform: translateX(0px); } 25%, 50% { transform: translateX(130px); } 100% { transform: translateX(0px); } }
    transform: translateX(0px);    transform: translateX(130px);    transform: translateX(0px);

Одному элементу можно назначить несколько анимаций, их имена и параметры надо писать в порядке присвоения:

element { animation-name: animation-1, animation-2; animation-duration: 2s, 4s; }
    animation-name: animation-1, animation-2;    animation-duration: 2s, 4s;

Подключение анимации к элементу происходит двумя командами — animation-name и animation-duration.

Название анимации

Свойство animation-name задает имя анимации. Рекомендуется использовать название, отражающее суть анимации, при этом можно использовать одно слово или несколько, связанных между собой при помощи пробела — или нижнего подчеркивания _.

Длительность анимации

Свойство устанавливает длительность анимации, например: animation-duration: 1s;. Его можно указывать в секундах (3s, 65s, .4s) или в миллисекундах (300ms, 1000ms). Не наследуется.

Временная функция

Свойство 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.

  • ease — функция по умолчанию, анимация начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
  • linear — анимация происходит равномерно на протяжении всего времени, без колебаний в скорости; соответствует cubic-bezier(0,0,1,1).
  • ease-in — анимация начинается медленно, а затем плавно ускоряется в конце; соответствует cubic-bezier(0.42,0,1,1).
  • ease-out — анимация начинается быстро и плавно замедляется в конце; соответствует cubic-bezier(0,0,0.58,1).
  • ease-in-out — анимация медленно начинается и медленно заканчивается; соответствует cubic-bezier(0.42,0,0.58,1).
  • cubic-bezier(x1, y1, x2, y2) — см.выше.
  • inherit — наследует это свойство от родительского элемента.

Визуальное сравнение

See the Pen VaWyjN by Aleksei (@AmateR) on CodePen.0

Анимация с задержкой

Свойство animation-delay определяет задержку до начала воспроизведения анимации, задаётся в секундах или миллисекундах. Отрицательная задержка начинает анимацию с определенного момента внутри её цикла, т.е. со времени, указанного в задержке. Это позволяет применять анимацию к нескольким элементам со сдвигом фазы, изменяя лишь время задержки. Если вы хотите, чтобы анимация началась с середины, задайте отрицательную задержку, равную половине времени, установленном в animation-duration. Не наследуется.

element { animation-name: animation-1; animation-duration: 2s; animation-delay: 10s; // Перед стартом этой анимации пройдет 10 сек. }
    animation-name: animation-1;    animation-delay: 10s; // Перед стартом этой анимации пройдет 10 сек.

Повтор анимации

Свойство animation-iteration-count позволяет запустить анимацию несколько раз. Не наследуется. В качестве значения выставляем любое положительное значение 1, 2, 3 … и т.д. либо infinite для бесконечного повторения. Значение 0 или любое отрицательное число удаляют анимацию из проигрывания.

element { animation-name: animation-1; animation-duration: 2s; animation-delay: 10s; animation-iteration-count: 5; //эта анимация проиграется 5 раз }
    animation-name: animation-1;    animation-iteration-count: 5; //эта анимация проиграется 5 раз

Направление анимации

Свойство animation-direction задает направление повтора анимации. Если анимация повторяется только один раз, то это свойство не имеет смысла. Не наследуется.

  • normal; — значение по умолчанию, анимация проигрывается в обычном направлении, с начала и до конца.
  • reverse; — анимация проигрывается в обратном направлении, от to к from.
  • alternate; — чётные проигрывания анимации будут идти в обратном направлении, а нечётные — в обычном.
  • alternate-reverse; — чётные проигрывания анимации будут проигрываться в обычном направлении, а нечётные — в обратном.

See the Pen bpRaLq by Aleksei (@AmateR) on CodePen.0

Проигрывание анимации

Свойство animation-play-state позволяет управлять проигрыванием и остановкой анимации. Остановка анимации внутри цикла возможна через использование этого свойства в скрипте (JavaScript). Также можно останавливать анимацию при наведении курсором мыши на объект (состояние :hover). Не наследуется.

  • running — значение по умолчанию, означает проигрывание анимации.
  • paused — останавливает анимацию.

Пример (при наведении на элемент анимация останавливается):

See the Pen ONgOQY by Aleksei (@AmateR) on CodePen.0

Состояние элемента до и после воспроизведения анимации

Свойство animation-fill-mode определяет в каком состоянии будет элемент до начала анимации и после её завершения.

  • forwards — воспроизводит анимацию до последнего кадра и не отматывает ее к первоначальному состоянию
  • backwards — после завершения анимации состояние элемента будет соответствовать первому кадру.
  • both — до начала анимации состояние элемента будет соответствовать первому кадру, а после окончания — последнему.

See the Pen NNgyPX by Aleksei (@AmateR) on CodePen.0


Смотрите также



Компьютерные курсы по направлениям:

Для начинающих


A

Компьютер для начинающих: Word, Excel, Access и другие программы!

Графические пакеты


B

Популярные пакеты Adobe Photoshop, CorelDraw, ArchiCAD, AutoCAD и другие!

WEB + анимация


C

Курсы по созданию сайтов, WEB-дизайну и крутой анимации в Adobe Flash!

Бухгалтерия + делопроизводство

Сетевые технологии


E

Курсы сборки ПК, системных администраторов и защиты информации!