Анимации (Animations) в CSS3

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

Создание CSS3 анимации

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

CSS3 анимация идет дальше в основе анимации на основе ключевых кадров, позволяя вам指定 изменения CSS свойств во времени как набор ключевых кадров, например, анимация Flash.

Создание CSS анимации - это двухшаговый процесс, как показано в следующем примере:

• Первый шаг создания CSS анимации - это определение различных ключевых кадров и использование их для命名 анимации.

• Второй шаг - использовать атрибут animation-name по имени для ссылки на ключевые кадры и добавить animation-duration и другие опциональныеАтрибуты анимацииНиже приведен пример того, как использовать функцию анимации CSS3, чтобы определить поведение анимации.

Но не нужно определять правила ключевых кадров перед их использованием или применением.<div>Анимация рамки из одного положения в горизонтальном направлении устанавливается в другое.

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　background: red;
　　　　position: relative;
　　　　/* Chrome, Safari, Opera */
　　　　-webkit-animation-name: moveit;
　　　　-webkit-animation-duration: 2s;
　　　　
　　　　animation-name: moveit;
　　　　animation-duration: 2s;
}
　
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
　　　　from {left: 0;}
　　　　to {left: 50%;}
}
　
@keyframes moveit {
　　　　from {left: 0;}
　　　　to {left: 50%;}
}

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

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

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

Процент代表着动画持续时间的百分比, 0%代表着动画的起点, 100%代表着终点, 50%代表着中点, и так далее. Это означает, что 50% ключевых кадров в 2-секундной анимации将成为 1-секундным моментом анимации.

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　margin: 100px;
　　　　background: red;
　　　　position: relative;
　　　　left: 0;
　　　　/* Chrome, Safari, Opera */
　　　　-webkit-animation-name: shakeit;
　　　　-webkit-animation-duration: 2s;
　　　　
　　　　animation-name: shakeit;
　　　　animation-duration: 2s;
}
　
/* Chrome, Safari, Opera */
@-webkit-keyframes shakeit {
　　　　12.5% {left: -50px;}
　　　　25% {left: 50px;}
　　　　37.5% {left: -25px;}
　　　　50% {left: 25px;}
　　　　62.5% {left: -10px;}
　　　　75% {left: 10px;}
}
　
@keyframes shakeit {
　　　　12.5% {left: -50px;}
　　　　25% {left: 50px;}
　　　　37.5% {left: -25px;}
　　　　50% {left: 25px;}
　　　　62.5% {left: -10px;}
　　　　75% {left: 10px;}
}

Сокращенные атрибуты анимации

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

Этот атрибут animation является сокращением, который используется для了一次性设置 всех отдельныхАтрибуты анимациинапример:

.box {
　　　　width: 50px;
　　　　height: 50px;
　　　　background: red;
　　　　position: relative;
　　　　/* Chrome, Safari, Opera */
　　　　-webkit-animation: repeatit 2s linear 0s infinite alternate;
　　　　
　　　　animation: repeatit 2s linear 0s infinite alternate;
}
　
/* Chrome, Safari, Opera */
@-webkit-keyframes repeatit {
　　　　from {left: 0;}
　　　　to {left: 50%;}
}
　
@keyframes repeatit {
　　　　from {left: 0;}
　　　　to {left: 50%;}
}

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

В таблице ниже кратко описаны все свойства, связанные с анимацией.