Учебник по css3: CSS Учебник — schoolsw3.com

Пример

 .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    фон: красный;
    положение: родственник;
    /* Хром, Сафари, Опера */
    -webkit-имя-анимации: moveit;
    -webkit-анимация-длительность: 2 с;
    /* Стандартный синтаксис */
    имя-анимации: moveit;
    продолжительность анимации: 2 с;
}
 
/* Хром, Сафари, Опера */
@-webkit-keyframes moveit {
    из {слева: 0;}
    до {слева: 50%;}
}
 
/* Стандартный синтаксис */
@ключевые кадры {
    из {слева: 0;}
    до {слева: 50%;}
} 

Вы должны указать по крайней мере два свойства имя-анимации и продолжительность анимации (больше 0), чтобы анимация происходила. Однако все остальные свойства анимации являются необязательными, поскольку их значения по умолчанию не препятствуют выполнению анимации.

Примечание: Не все свойства CSS можно анимировать. Как правило, любое свойство CSS, принимающее значения в виде чисел, длины, процентов или цветов, является анимируемым.

Определение ключевых кадров

Ключевые кадры используются для указания значений свойств анимации на различных этапах анимации. Ключевые кадры задаются с помощью специального правила CSS — @keyframes . Селектор ключевого кадра для правила стиля ключевого кадра начинается с процента ( % ) или ключевых слов от (то же, что 0%) или от до (то же самое, что 100%). Селектор используется для указания того, где создается ключевой кадр во время анимации.

Проценты представляют собой процент продолжительности анимации, 0 % — начальную точку анимации, 100 % — конечную точку, 50 % — середину и так далее. Это означает, что 50% ключевого кадра в 2-секундной анимации будут 1-секундными в анимации.

Пример

 . box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    поле: 100 пикселей;
    фон: красный;
    положение: родственник;
    слева: 0;
    /* Хром, Сафари, Опера */
    -webkit-имя-анимации: встряхнуть;
    -webkit-анимация-длительность: 2 с;
    /* Стандартный синтаксис */
    имя-анимации: встряхнуть;
    продолжительность анимации: 2 с;
}
 
/* Хром, Сафари, Опера */
@-webkit-ключевые кадры встряхнуть {
    12,5% {слева: -50px;}
    25% {слева: 50px;}
    37,5% {слева: -25px;}
    50% {слева: 25px;}
    62,5% {слева: -10px;}
    75% {слева: 10px;}
}
 
/* Стандартный синтаксис */
@ключевые кадры встряхнуть {
    12,5% {слева: -50px;}
    25% {слева: 50px;}
    37,5% {слева: -25px;}
    50% {слева: 25px;}
    62,5% {слева: -10px;}
    75% {слева: 10px;}
} 

Сокращенное свойство анимации

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

Свойство animation является сокращенным свойством для одновременной установки всех отдельных свойств анимации в указанном порядке. Например:

Пример

 .box {
    ширина: 50 пикселей;
    высота: 50 пикселей;
    фон: красный;
    положение: родственник;
    /* Хром, Сафари, Опера */
    -webkit-анимация: повторять 2с линейно 0с бесконечно чередовать;
    /* Стандартный синтаксис */
    анимация: повторять 2с линейно 0с бесконечно чередовать;
}
 
/* Хром, Сафари, Опера */
@-webkit-ключевые кадры повторяют {
    из {слева: 0;}
    до {слева: 50%;}
}
 
/* Стандартный синтаксис */
@ключевые кадры повторяют {
    из {слева: 0;}
    до {слева: 50%;}
} 

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

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

В следующей таблице представлен краткий обзор всех свойств, связанных с анимацией.

Собственность	Описание
анимация	Сокращенное свойство для установки всех свойств анимации в одном объявлении.
имя-анимации	Указывает имя @keyframes определенных анимаций, которые следует применить к выбранному элементу.
продолжительность анимации	Указывает, сколько секунд или миллисекунд требуется анимации для завершения одного цикла анимации.
функция синхронизации анимации	Указывает, как анимация будет развиваться в течение каждого цикла, т. е. функции плавности.
задержка анимации	Указывает, когда начнется анимация.
число итераций анимации	Указывает, сколько раз цикл анимации должен воспроизводиться перед остановкой.
анимация-направление	Указывает, должна ли анимация воспроизводиться в обратном порядке в чередующихся циклах.
режим анимации-заполнения	Указывает, как анимация CSS должна применять стили к своей цели до и после ее выполнения.
состояние воспроизведения анимации	Указывает, запущена анимация или приостановлена.
@ключевые кадры	Задает значения свойств анимации в различных точках анимации.

Предыдущая страница Следующая страница

Как создать эффекты перехода CSS3

Рекламные объявления

Функция перехода CSS3 позволяет плавно изменять значения свойств CSS в течение заданного времени.

Понимание переходов CSS3

Обычно при изменении значения свойства CSS результат рендеринга мгновенно обновляется. Типичным примером является изменение цвета фона кнопки при наведении курсора мыши. В обычном сценарии цвет фона кнопки немедленно меняется со старого значения свойства на новое значение свойства, когда вы наводите курсор на кнопку.

CSS3 представляет новую функцию перехода, которая позволяет плавно анимировать свойство от старого значения к новому с течением времени. В следующем примере показано, как анимировать background-color кнопки HTML при наведении мыши.

Пример

 кнопка {
    фон: #fd7c2a;
    /* Для Safari 3.0+ */
    -webkit-transition-свойство: фон;
    -webkit-transition-duration: 2s;
    /* Стандартный синтаксис */
    свойство перехода: фон;
    продолжительность перехода: 2 с;
}
кнопка:наведите {
    фон: #3cc16e;
} 

Чтобы переход произошел, вы должны указать по крайней мере две вещи — имя свойства CSS, к которому вы хотите применить эффект перехода с помощью transition-property CSS-свойство и продолжительность эффекта перехода (больше 0) с использованием CSS-свойства transition-duration . Однако все остальные свойства перехода являются необязательными, поскольку их значения по умолчанию не препятствуют выполнению перехода.

Примечание: Не все свойства CSS можно анимировать. Как правило, любое свойство CSS, принимающее значения в виде чисел, длины, процентов или цветов, является анимируемым.

Выполнение нескольких переходов

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

Пример

 кнопка {
    фон: #fd7c2a;
    граница: 3 пикселя сплошная #dc5801;
    /* Для Safari 3.0+ */
    -webkit-transition-property: фон, граница;
    -webkit-transition-duration: 1с, 2с;
    /* Стандартный синтаксис */
    переход-свойство: фон, граница;
    длительность перехода: 1с, 2с;
}
кнопка:наведите {
    фон: #3cc16e;
    цвет границы: #288049;
} 

Сокращенное свойство перехода

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

Свойство transition является сокращенным свойством для установки всех индивидуальных свойств перехода (т. е. свойство перехода , длительность перехода , функция времени перехода и transition-delay ) сразу в указанном порядке.

Важно придерживаться этого порядка значений при использовании этого свойства.

Пример

 кнопка {
    фон: #fd7c2a;
    -webkit-transition: фон 2s easy-in 0s; /* Для Safari 3.0+ */
    переход: фон 2s easy-in 0s; /* Стандартный синтаксис */
}
кнопка:наведите {
    фон: #3cc16e;
} 

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

Свойства перехода CSS3

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

Свойство	Описание
переход	Сокращенное свойство для установки всех четырех отдельных свойств перехода в одном объявлении. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт