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

Я работаю над портфолио, чтобы показать, когда я подаю заявку на следующее исследование. Поскольку мы живем в 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, который заставляет элементы с id 'fadein'... исчезать.

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

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

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

Ответ 1

Попробуйте:

#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*/
}

Ответ 2

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