How to keep styles after animation?


Tags: html,css,css3,css-animations

Problem :

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;
opacity:0;
-webkit-opacity:0;
}

@-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.



Solution :

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

    CSS Howto..

    How to override some CSS class settings

    CSS Background Color Not Showing

    How do I control the wrapping of these
  • items?
  • How to modify self and other classes with CSS :hover?

    How to make this kind of border css? [closed]

    css - How to remove padding next to adjacent links?

    How to make this div using html and css?

    when we have a double border in a table , how do we fill in the gap beetween the two borders

    How to center without the
    tag using CSS?

    how to place last div into right top corner of parent div? (css)

    how to change stack order of of text label in JavaScript?

    How to style textbox using CSS in ASP.NET

    How do CSS sprites speed up a web site?

    How to create a CSS box link without using display: block

    How can I style the n-th div with CSS

    How can I take just a part of CSS from other site's when using bootstrap?

    How can I Resize & Enlarge an Image (like sprite icons) via CSS 3?

    How I can make nice looking matrix of buttons with bootstrap 3?

    How to interpret HTML multiple class names in the CSS renderization? What W3C says about it?

    How to give a matte-finish (non-glassy) look to an image with CSS?

    How to do fallback for browser-specific css expressions

    HTML5 CSS (How to on hover image ignore transparent)

    How to include .css file in smarty template file?

    How to keep footer at bottom of screen using jQuery

    How to Paginate Footnotes Properly in CSS & HTML (Print Media)

    How to Make a materialize CSS button's width same as col s12?

    How to figure out which lines of css is not actually affecting anything again?

    Javascript: How do I get the id of a clicked link and then style it in css

    How to make css search form responsive

    How come the exact same version of Google Chrome shows different layout?