@-webkit-keyframes FadeIn
{
0%
{
opacity:0;
}
100%
{
opacity:1;
}
}
@-webkit-keyframes FadeOut
{
0%
{
opacity:1;
}
100%
{
opacity:0;
}
}
@-moz-keyframes FadeIn
{
from { opacity:0; } to { opacity:1; }
}
@-moz-keyframes FadeOut
{
from { opacity:1; } to { opacity:0; }
}
@-o-keyframes FadeIn
{
from { opacity:0; } to { opacity:1; }
}
@-o-keyframes FadeOut
{
from { opacity:1; } to { opacity:0; }
}
@keyframes FadeIn
{
from { opacity:0; } to { opacity:1; }
}
@keyframes FadeOut
{
from { opacity:1; } to { opacity:0; }
}
#example
{
-webkit-animation:FadeIn ease-in 0.5s;
-moz-animation:FadeIn ease-in 0.5s;
-o-animation:FadeIn ease-in 0.5s;
animation:FadeIn ease-in 0.5s;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
-o-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
IEはCSS3トランジションをサポートしていません。ここからのより多くのアドバイス