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

Я пытаюсь получить свойство анимации 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>

Ответы

Ответ 1

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

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

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

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

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

Установка значения переадресации "цель сохранит вычисленные значения, установленные последним ключевым кадром, встречающимся во время выполнения"

Ответ 2

В дополнение к answer @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>

Ответ 3

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

Ответ 4

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

// 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>

Ответ 5

Могу ли я задать вопрос об этом последнем ответе, потому что он очень близок к работе на меня, однако у меня есть этот #box div внутри другого div, к которому применен js, говоря

$ (document).ready (function() {
setTimeout (function(){
$("div.center-div").fadeOut(1200); {
$("div.center-div").remove(1200);
};
},5500);
});

У меня есть этот (.center-div) div с svg, который затем полностью исчезает. Существует изображение bg, которое остается на месте после исчезновения. Работает отлично. Я хочу, чтобы div #box, как указано выше, появлялся, а затем оставался (все это поверх других svg), но не могу заставить это работать. Если я добавлю этот #box div в (.center-div), он просто добавится под другим div. Использовали z-index безрезультатно. Я попытался создать класс вместо id - что я могу сделать, чтобы этот последний элемент анимации svg line вошел и остался, когда в конверте div есть javascript для исчезновения и удаления?

Ссылка на пример: http://bss.com/RK/full3.html - я хочу, чтобы слово МЕДИА оставалось поверх фонового изображения после того, как оно будет записано. Может кто-нибудь помочь мне с этим?