WebKit проблема Анимации CSS - сохранение конечного состояния анимации? [дубликат]
Этот вопрос уже имеет ответ здесь:
Учитывая следующую анимацию CSS3....
Hello world
Привет Мировой текст анимирует, как ожидается раскрывающихся 100 пкс. Однако в конце анимации это переходит назад к ее исходному положению.
Очевидно это имеет смысл в CSSland. Анимация была применена и больше не действует на элемент, таким образом, первоначальные стили вступают в силу. Это кажется немного нечетным мне, хотя - конечно, если бы Вы анимируете элемент в место затем, можно было бы ожидать, что то размещение сохранится?
Есть ли какой-либо способ сделать конечное положение 'липким', не имея необходимость обращаться к JavaScript для меток имени класса или стиля на элемент в конце анимации для фиксации ее измененных свойств? Я знаю, что переходы сохраняются, но для анимации я имею рассматриваемый (пример только в демонстрационных целях), переходы не дают уровень необходимого управления. Без этого кажется, что сложные анимации только имеют применение для круговых процессов, где элемент заканчивается назад в своем исходном состоянии.
3 ответа
Если вы определите конечное состояние в классе, то он должен сделать то, что вы хотите в примере:
.drop_box {
-webkit-transform: translateY(100px);
-webkit-animation-name: drop;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
}
Но если ваша анимация в любом случае управляется событиями, вам, вероятно, придется использовать немного JavaScript. Самый простой способ - сделать так, чтобы добавление класса с конечным состоянием было тем, что запускает анимацию.
--edit
См. ответ dino's answer для информации о свойстве animation-fill-mode, добавленном в April 2012 WD.
Вы можете использовать -webkit-animation-fill-mode, чтобы сохранить конечное состояние (или даже расширить начальное состояние назад). Он был добавлен в WebKit некоторое время назад и поставляется в iOS 4 и Safari 5.
-webkit-animation-fill-mode: forwards;
Я думаю, что вы, возможно, ищете:
0% {
-webkit-transform: translateY(0px);
}
100% {
-webkit-transform: translateY(100px);
}
Это должно оставить его в нужном месте.