CSS3 Fade Out Using Opacity

**louvelle** · Oct 9th, 2012, 07:45 PM

Hi guys.
I've been trying to figure out how to animate two images stack on each other using keyframes in CSS3 without using the hover function in CSS.

This is my CSS code so far.

Code:

#aimage img {
  position:absolute;
  left:0;
  margin-bottom: 20px;
  opacity: 1;
}

#aimage img.bottom
{
	opacity: 1;
	animation: kframes 2s;
	-moz-animation: kframes 2s; /* Firefox */
	-webkit-animation: kframes 2s; /* Safari and Chrome */
	-o-animation: kframes 2s; /* Opera */
}

@keyframes kframes
{
    0% {opacity: 0;}
    100%{opacity:1;}
}


@-moz-keyframes kframes /* Firefox */
{
    0% {opacity: 0;}
    100%{ opacity:1;}
}

@-webkit-keyframes kframes /* Safari and Chrome */
{
    0% {opacity: 0;}
    100%{opacity:1;}
}

@-o-keyframes kframes /* Opera */
{
    0% {opacity: 0;}
    100%{opacity:1;}
}

The code actually works if I use a hover function on it.
Is it even possible without using a hover function, javascript or a jquery on it? If not, then I have to settle it down and use jquery to my animation.

**coothead** · Oct 10th, 2012, 03:31 PM

Hi there louvelle,

at present there is no support for "@keyframes" by IE and Opera.

You need to use "from{} and to{}" to get it to work on page load rather than on hover.

Here is an example, that works in Firefox and Safari and I would guess Chrome possibly, for you to try...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<base href="http:/www.coothead.co.uk/images/">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title>@ keyframes</title>

<style type="text/css">
body {
    background-color:#000;
 }
#aimage {
    position:relative;
    width:100px;
    height:100px;
    border:1px solid #fdf177;
    margin:50px auto;
    border-radius:52px;
    box-shadow:0 0 40px #fde;
 }
#aimage img {
    position:absolute;
    left:0;top:0;
    width:100px;
    height:100px;
    border-radius:52px;
 }
#bottom{
    animation:kframes 10s;
    -moz-animation:kframes 10s; /* Firefox */
    -webkit-animation:kframes 10s; /* Safari and Chrome */
    -o-animation:kframes 10s; /* no support by Opera as yet */
 }
@-moz-keyframes kframes {
from {
    opacity:0;
 }
to {
    opacity:1;
  }
 }
@-webkit-keyframes kframes {
from {
    opacity:0;
 }
to {
    opacity:1;
  }
 }
@-o-keyframes kframes { /* no support by Opera as yet */
from {
    opacity:0;
 }
to {
    opacity:1;
  }
 }
</style>

</head>
<body>

<div id="aimage">
 <img src="anim4.gif" alt="">
 <img src="buddha.jpg" alt="" id="bottom">
</div>

</body>
</html>

Thread: CSS3 Fade Out Using Opacity

Thread Tools

Display

CSS3 Fade Out Using Opacity

Re: CSS3 Fade Out Using Opacity

Posting Permissions