Проблема Webkit CSS Animation - сохранение конечного состояния анимации?

Учитывая следующую анимацию CSS3....

<style type="text/css" media="screen">

.drop_box {
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
    -webkit-transform: translateY(0px);
  }

  to {
    -webkit-transform: translateY(100px);
  }

}
</style>

<div class="drop_box">  
    Hello world
</div>

Текст Hello World оживает, как ожидается, сбрасывая 100px. Однако в конце анимации он возвращается в исходное положение.

Ясно, что это имеет смысл в CSSland. Анимация была применена и больше не действует на элемент, чтобы исходные стили вступили в силу. Мне кажется немного странным, хотя, конечно, если кто-то оживляет элемент на месте, то можно было бы ожидать, что его сохранение сохранится?

Есть ли способ сделать конечную позицию "липкой", не прибегая к Javascript, чтобы пометить имя класса или стиль для элемента в конце анимации, чтобы исправить его измененные свойства? Я знаю, что переходы сохраняются, но для рассматриваемой анимации (пример предназначен только для демонстрации) переходы не дают необходимого уровня контроля. Без этого кажется, что сложные анимации применимы только для круговых процессов, в которых элемент возвращается в исходное состояние.

Ответы

Ответ 1

Если вы определяете конечное состояние в классе, тогда он должен делать то, что вы хотите в примере:

.drop_box {
    -webkit-transform: translateY(100px);
    -webkit-animation-name: drop;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: 1;
}

Но если ваша анимация управляется событиями, вам, вероятно, придется использовать немного JavaScript. Самый простой способ - сделать добавление класса с конечным состоянием в нем, что запускает анимацию.

- изменить

См. ответ dino для информации о свойстве animation-fill-mode, добавленном в Апрель 2012 WD.

Ответ 2

Вы можете использовать -webkit-animation-fill-mode, чтобы сохранить конечное состояние (или даже увеличить начальное состояние назад). Он был добавлен в WebKit некоторое время назад и отправлен в iOS 4 и Safari 5.

-webkit-animation-fill-mode: forwards;

Ответ 3

Просто чтобы добавить к большим ответам здесь, вы можете использовать фреймворк javascript, такой как jQuery Transit, который обрабатывает переходы CSS3 для вас.

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

Это очень простой однострочный лайнер, который выполняет то, что вы хотите:

JavaScript:

$(".drop_box").transition({y: "+=100px"}, 2000);

JS Fiddle Demo

Ответ 4

Я думаю, что вы можете искать:

0% {
  -webkit-transform: translateY(0px);
}

100% {
  -webkit-transform: translateY(100px);
}

Это должно оставить его в нужном месте.

Ответ 5

Еще один способ сделать это, просто для пинков,

    <style type="text/css" media="screen">

.drop_box {
   position:absolute;
   top:100px;
  -webkit-animation-name: drop;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: 1;
}

@-webkit-keyframes drop {

  from {
  -webkit-transform: translateY(-100px);
  }

  to {
  -webkit-transform: translateY(0px);
  }

}
</style>

<div class="drop_box">  
Hello world
</div>