Как сохранить стили после анимации? - PullRequest
Новая
       1

Как сохранить стили после анимации?

26 голосов
/ 03 февраля 2012

Я работаю в портфолио, чтобы показать, когда я подаю заявку на мое следующее исследование.Так как мы живем в 2012 году, в нем есть множество необычных анимаций и мусора CSS3, просто чтобы дать им чувство «Нам нужен этот парень».У меня небольшая проблема на данный момент.

Это небольшая часть определенного элемента: 

/* This is the CSS of the elements with the id called 'fadein' */
#fadein {
    -moz-animation-duration: 2s;
    -moz-animation-name: item;
    -moz-animation-delay: 4.5s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: item;
-webkit-animation-delay: 4.5s;
opacity:0;
-webkit-opacity:0;
}

@-webkit-keyframes item {
from {
-webkit-opacity: 0;
     }
to { 
-webkit-opacity: 1;
 }
}

Обратите внимание, что я пропустил ключевые кадры Firefox, так как они довольнотот же самый.Правильно, безобразно отформатированный CSS, который делает элементы с идентификатором 'fadein' ... fade in.

Проблема в том, что элементы снова исчезают после завершения анимации.Это превращает уродливо отформатированный Css в непригодный Css.

Кто-нибудь знает, как сохранить измененный стиль после анимации?

Я думаю, что этот вопрос уже задавался, и мне очень жаль, еслипоэтому.

Ответы [ 2 ]

53 голосов
/ 03 февраля 2012

Попробуйте с: 

#fadein {
  -webkit-animation-fill-mode: forwards; /* Chrome 16+, Safari 4+ */
  -moz-animation-fill-mode: forwards;    /* FF 5+ */
  -o-animation-fill-mode: forwards;      /* Not implemented yet */
  -ms-animation-fill-mode: forwards;     /* IE 10+ */
  animation-fill-mode: forwards;         /* When the spec is finished */
}
1 голос
/ 15 июля 2012

Ответ Duopixels - правильный путь, но не полностью кроссбраузерный, однако этот плагин jquery включает анимационные обратные вызовы, и вы можете стилизовать элементы так, как вам нравится в функции обратного вызова: https://github.com/krazyjakee/jQuery-Keyframes

...