How to keep styles after animation?

html css css3 css-animations

20553 просмотра

2 ответа

I'm working at a portfolio to show when I apply for my next study. Since we're living in 2012, it has tons of fancy animations and CSS3 junk, just to give them the 'We need this guy' feeling. I'm having a little problem at the moment.

This is a small part of a specific element:

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

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

Please note that I left out the Firefox keyframes, since they are quite the same. Right, ugly-formatted CSS that makes elements with the id 'fadein'... fade in.

The problem is, the elements disappear again after the animation is finished. This turns ugly-formatted Css into unusable Css.

Does anybody have any idea how to keep the changed style after the animation?

I guess this question has been asked before and I'm pretty sorry for that if so.

Автор: amees_me Источник Размещён: 13.11.2019 11:31

Ответы (2)

58 плюса


Try with:

#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 */
Автор: methodofaction Размещён: 03.02.2012 03:30

1 плюс

Duopixels answer is the right way, but not totally cross-browser, however, this jquery plugin enables animation callbacks and you can style the elements how you like in the callback function:

Автор: Jake Cattrall Размещён: 15.07.2012 05:52
Вопросы из категории :