Свойство CSS Animation остается после анимации

93

Я пытаюсь сохранить свойство анимации CSS после завершения, возможно ли это?

Это то, чего я пытаюсь достичь ...

Элемент должен быть скрыт, когда пользователь попадает на страницу, через 3 секунды (или что-то еще) он должен исчезать, а после завершения анимации он должен оставаться там.

Вот попытка скрипки ... http://jsfiddle.net/GZx6F/

Вот код для сохранения ...

<h2>Test</h2>

<style>
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.9;
    }
}

h2 {
    animation: fadeIn 1s ease-in-out 3s;
}
</style>

Я знаю, как это сделать с помощью jQuery ... вот так ...

<h2>test</h2>

<script>
  $(document).ready(function(){
    $('h2').hide().delay(3000).fadeIn(3000)
  });
</script>
css css-animations SparrwHawk
источник
Является ли w3schools устаревшим? В нем говорится, что Chrome и FireFox поддерживают только альтернативы.
iambriansreed
5
@iambriansreed: Я всегда предполагаю, что это так :)
BoltClock
4
@iambriansreed даже не нажимает на результаты поиска w3schools. Если вы случайно это сделаете, отведите взгляд от монитора и нажмите кнопку возврата мыши.
doug65536 05

Ответы:

166

Я думаю, вы ищете animation-fill-modeсвойство CSS3

https://developer.mozilla.org/en/CSS/animation-fill-mode

Свойство CSS animation-fill-mode указывает, как CSS-анимация должна применять стили к своей цели до и после ее выполнения.

для вашей цели просто попробуйте установить

h2 {
  animation: fadeIn 1s ease-in-out 3s;
  animation-fill-mode: forwards;  
}

Установка форвардного значения «цель будет сохранять вычисленные значения, установленные последним ключевым кадром, обнаруженным во время выполнения»

Фабрицио Кальдеран
источник
1
Спасибо, Фабрицио, это здорово, я приму этот ответ. Происходит только одна странная вещь, о которой мне интересно, знаете ли вы что-нибудь - на iOS (больше ничего не тестировал) обратный отсчет до ускорения приостанавливается всякий раз, когда я прокручиваю, например, если я начинаю прокручивать сразу после загрузки страницы он не исчезает. Но когда я перестаю прокручивать 3 секунды, начинается обратный отсчет. Это просто поведение iOS по умолчанию? Спасибо
SparrwHawk
Какое фантастическое решение.
Lalnuntluanga Chhakchhuak
Доступно ли это в необработанной анимации SVG?
Джастин
16

В дополнение к ответу на @Fabrizio Calderan , это должно быть сказано , что вы можете даже применить animation-fill-modeсвойство forwardsнепосредственно animation. Таким образом, также должно работать следующее:

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.9;
  }
}

h2 {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 3s forwards;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h2>Test</h2>
Развернуть фрагмент

yckart
источник
1

Как анимировать элемент и заставить его оставаться в процессе анимации:

// Beggin
#box {
  /* Give it a width, a height and a background so can see it  */
  width: 200px;
  height: 200px;
  /* Unimportant styling */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .4) inset;
  border-radius: 7px;
  background: linear-gradient(to bottom, #fff 30%, #fcfcfc 40%, #f8f8f8 50%, #f0f0f0 100%);
  
  /* Starts here: */
  opacity: 0;
  animation: yourName 2800ms ease-in-out 0s forwards;
}

@keyframes yourName {
  0% /* (from) */ {
    opacity: 0;
  }
  100% /* (to) */ {
    opacity: 1;
  }
}
<div id="box"></div>
Развернуть фрагмент

codeWithMe
источник
0

Со мной случилось нечто подобное. Я добавил положение: относительно элемента, который был анимирован, и это исправило его для меня.

тяу
источник