Последние учебники веб-разработки
×

CSS Руководство

CSS ГЛАВНАЯ CSS Введение CSS Синтаксис CSS Как CSS Цвета CSS Фон CSS Границы CSS Маржа CSS набивка CSS Высота ширина CSS Текст CSS шрифты CSS связи CSS Списки CSS таблицы CSS Модель Бокса CSS Outline CSS Дисплей CSS Максимальная ширина CSS Позиция CSS терка CSS Inline-block CSS выравнивать CSS Комбинаторы CSS Псевдо-класс CSS Псевдо-элемент CSS Панель навигации CSS Dropdowns CSS Всплывающие CSS Галерея CSS изображение Непрозрачность CSS спрайтов CSS Attr селекторы CSS Формы CSS Счетчики

CSS3

CSS3 Введение CSS3 Закругленные углы CSS3 Пограничные изображения CSS3 Фон CSS3 Цвета CSS3 Градиенты CSS3 Тени CSS3 Текст CSS3 шрифты CSS3 2D Трансформации CSS3 3D Трансформации CSS3 Переходы CSS3 Анимации CSS3 Изображений CSS3 Кнопки CSS3 пагинация CSS3 Несколько столбцов CSS3 Пользовательский интерфейс CSS3 Box Определение размеров CSS3 Flexbox CSS3 Медиа-запросы CSS3 Примеры MQ

CSS Адаптивный веб-дизайн

Адаптивный веб-дизайн вступление Адаптивный веб-дизайн Viewport Адаптивный веб-дизайн Вид сетки Адаптивный веб-дизайн Медиа-запросы Адаптивный веб-дизайн Изображений Адаптивный веб-дизайн Видео Адаптивный веб-дизайн Каркасы

CSS Examples

CSS Примеры CSS викторина CSS сертификат

CSS References

CSS Справка CSS Селекторы CSS функции CSS Ссылка Aural CSS Web Safe шрифты CSS Animatable CSS Единицы CSS PX-EM конвертер CSS Цвета CSS Значения цвета CSS Цвет Названия CSS3 Поддержка браузеров

 

CSS Анимации


CSS3 Animations

CSS3 анимации позволяет анимации большинства HTML-элементов без использования JavaScript или Flash!

CSS3
Анимация

Поддержка браузеров для анимации

Числа в таблице указать первую версию браузера, которая полностью поддерживает свойство.

Числа следуют -webkit-, -moz- или -o- указать первую версию , которая работала с приставкой.

Имущество
@keyframes 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-
animation 43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

Что такое CSS3 Animations?

Анимация позволяет элемент постепенно меняться от одного стиля к другому.

Вы можете изменить как много CSS свойств, которые вы хотите, как много раз вы хотите.

Чтобы использовать CSS3 анимацию, необходимо сначала определить несколько ключевых кадров для анимации.

Keyframes держать какие стили элемент будет иметь в определенное время.


@keyframes Правило

При указании стилей CSS внутри @keyframes правило, анимация будет постепенно меняться от текущего стиля к новому стилю в определенное время.

Чтобы получить анимацию на работу, вы должны привязать анимацию к элементу.

Следующий пример связывает "пример" анимации к <div> элемент. Анимация будет длится в течение 4 -х секунд, и он будет постепенно менять цвет фона в <div> элемент из "красного" на "желтый":

пример

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
Попробуй сам "

Примечание: Если animation-duration свойство не задано, то анимация не будет иметь никакого эффекта, так как значение по умолчанию равно 0.

В приведенном выше примере мы определили , когда стиль будет меняться, используя ключевые слова "from" и "to" (который представляет собой 0% (старт) и 100% (полная)).

Кроме того, можно использовать процент. С помощью процентов, вы можете добавить столько изменения стиля, как вам нравится.

Следующий пример изменит цвет фона в <div> элемент , когда анимация 25% полная, 50% завершено, и еще раз , когда анимация завершена на 100%:

пример

/* The animation code */
@keyframes example {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
Попробуй сам "

Следующий пример изменит как цвет фона и положение <div> элемент , когда анимация 25% полная, 50% завершено, и еще раз , когда анимация завершена на 100%:

пример

/* The animation code */
@keyframes example {
    0%   {background-color: red; left:0px; top:0px;}
    25%  {background-color: yellow; left:200px; top:0px;}
    50%  {background-color: blue; left:200px; top:200px;}
    75%  {background-color: green; left:0px; top:200px;}
    100% {background-color: red; left:0px; top:0px;}
}

/* The element to apply the animation to */
div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}
Попробуй сам "

Задержка анимации

animation-delay свойство определяет задержку начала анимации.

Следующий пример имеет задержку в 2 секунды перед началом анимации:

пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-delay: 2s;
}
Попробуй сам "

Установить, сколько раз анимация должна работать

animation-iteration-count свойство определяет , сколько раз анимация должна работать.

В следующем примере будет выполняться анимация в 3 раза, прежде чем остановится:

пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
}
Попробуй сам "

В следующем примере используется значение " infinite " , чтобы сделать анимацию длиться вечно:

пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: infinite;
}
Попробуй сам "

Запуск анимации в обратном направлении или альтернативных циклов

animation-direction свойство используется , чтобы позволить анимационного работать в обратном направлении или альтернативных циклов.

В следующем примере будет запускать анимацию в обратном направлении:

пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: reverse;
}
Попробуй сам "

В следующем примере используется значение "alternate" , чтобы сделать анимацию сначала запустить вперед, затем назад, затем вперед:

пример

div {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
    animation-iteration-count: 3;
    animation-direction: alternate;
}
Попробуй сам "

Укажите скорость кривой анимации

animation-timing-function свойство задает кривую скорости анимации.

Свойство анимации-тайминг-функция может иметь следующие значения:

  • ease - задает анимацию с медленного старта, то быстро, то медленно закончится (это по умолчанию)
  • linear - задает анимацию с той же скоростью , от начала до конца
  • ease-in - задает анимацию с медленного старта
  • ease-out - задает анимацию с медленным конца
  • ease-in-out - определяет анимацию с медленным началом и концом
  • cubic-bezier(n,n,n,n) - позволяет определить свои собственные значения в кубическом-Безье функции

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

пример

#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Попробуй сам "

Анимация сокращённое свойство

В приведенном ниже примере использует шесть свойств анимации:

пример

div {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
Попробуй сам "

Тот же эффект анимации , как описано выше может быть достигнуто путем использования сокращенную animation свойства:

пример

div {
    animation: example 5s linear 2s infinite alternate;
}
Попробуй сам "

Проверьте себя с упражнениями!

Упражнение 1 » Упражнение 2» Упражнение 3 » Упражнение 4» Упражнение 5 » Упражнение 6»


CSS3 Свойства анимации

В следующей таблице перечислены @keyframes правила и все свойства анимации:

Имущество Описание
@keyframes Определяет код анимации
animation Сокращённое свойство для установки всех свойств анимации
animation-delay Определяет задержку начала анимации
animation-direction Определяет, должен ли анимация играть в обратном направлении или альтернативных циклов
animation-duration Определяет, сколько секунд или миллисекунды анимации требуется, чтобы завершить один цикл
animation-fill-mode Определяет стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или если она имеет задержку)
animation-iteration-count Указывает, сколько раз анимация должна играть
animation-name Задает имя анимации @keyframes
animation-play-state Определяет, будет ли анимация работает или приостановлена
animation-timing-function Определяет кривую скорости анимации