Записи, помеченные ‘css-анимация’

• 

  20 примеров анимации, созданных при помощи кода

  В этой подборке мы собрали интересные примеры анимации, написанные при помощи кода. Современные технологии дают современным программистам практически неограниченные возможности. Сегодняшний веб пестрит всевозможными эффектами. Некоторыми из них мы спешим поделиться с вами.

  Далее... 2 Комментариев »
• 

  Создание плавных анимаций с использованием состояния воспроизведения анимации

  Несложно сделать анимацию CSS, которая запускается при загрузки страницы. Нужно просто использовать свойство анимации с параметрами. А как быть, если анимация применяется при определенном состоянии, например, при наведении указателя мыши, при нажатии, при активации элемента или изменении класса с помощью JS?

  Далее... 1 Комментарий »
• 

  Создание анимаций CSS с использованием единственного ключевого кадра

  Как Вы могли заметить, мы считаем важным по мере возможности уменьшать количество кода, конечно, до тех пор, пока он остается читабельным. Многие анимации CSS, с которыми мы сталкиваемся, можно записать более компактно, и в этом уроке мы расскажем, как именно это можно сделать. 

  Далее... 1 Комментарий »
• 

  Создание анимированной зимней шапки сайта с использованием CSS3

  С помощью анимаций CSS3 можно создавать ошеломительные эффекты. Из этого урока Вы узнаете, как создать интересную анимированную шапку с помощью ключевых кадров. Этот урок посвящен грядущим праздникам, и мы очень надеемся, что его выполнение поможет вам настроиться на новогоднее настроение!

  Далее... Нет комментариев »
• 

  Цикл уроков об анимации CSS3. Часть 2: Основы свойств анимаций

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

  Далее... Нет комментариев »
• 

  Анимированные полосы загрузки с использованием CSS3 и фонов SVG

  Последнее время интернет стал сходить с ума от дизайна без использования изображений, так что мы решили создать анимированную полосу загрузки с использованием изображений SVG вместо обычных блочных элементов CSS для отображения геометрических фигур. Основная цель этого урока — создать интересные полосы загрузки с использованием CSS, после чего добавить изображение SVG как фон. И потом анимировать это с [...]

  Далее... Нет комментариев »
• 

  Создание измельчителя бумаги с кнопкой удаления при помощи CSS3

  Вы видели небольшую анимацию для приложения iPhone, в которой, когда вы нажимаете кнопку удаления, элемент, который вы удаляете, буквально измельчается шредером? Такой эффект можно создать и с помощью только CSS. Сегодня мы займемся именно этим. Мы будем использовать свойства объемного перехода, анимации и широко известное свойство clip, чтобы создать этот эффект.

  Далее... 1 Комментарий »
• 

  Создание эффектов загрузки страницы

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

  Далее... 3 Комментариев »
• 

  Создание трехмерной анимации с использованием только CSS3

  Сегодня мы создадим трехмерный эффект, используя свойство CSS -webkit-perspective. Свойство perspective — это как раз то, что нужно, чтобы создать эффект трехмерности. Используя также свойства transform и transition, мы можем создать трехмерную анимацию на чистом CSS3.

  Далее... 4 Комментариев »