Fade in / fade out

Details
Written by: Stanko Milosev
Category: CSS3
Hits: 4639
Example taken from here, my example I created only for Chrome.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="/index.css">
</head>
<body>
    <button id="clickMe">Click Me</button>
</body>
</html>

CSS:

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

#clickMe {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */

    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/

    -webkit-animation-duration:1s;

    -webkit-animation-delay: 0.7s;
}
Example: