fade in with CSS

[Nic727]

Hi,

 

with my template, I have a banner appearing slowly when the page load.

 

The CSS is :

#banner .inner {    -moz-animation: reveal-banner 1s 0.25s ease-in-out;    -webkit-animation: reveal-banner 1s 0.25s ease-in-out;    -ms-animation: reveal-banner 1s 0.25s ease-in-out;    animation: reveal-banner 1s 0.25s ease-in-out;    -moz-animation-fill-mode: forwards;    -webkit-animation-fill-mode: forwards;    -ms-animation-fill-mode: forwards;    animation-fill-mode: forwards;    background: rgba(52, 27, 43, 0.5);    color: #fff;    display: inline-block;    opacity: 0;    padding: 3em;    text-align: center;}

First, I would like to know what is "reveal-banner", because I can't find it on Google.

 

Secondly, I'm trying to put the same animation for my nav bar to slowly appear when the page load, but it's broken. First the text appear and disappear to do the animation... What should I do to make the text invisible and do the animation to show the text in the nav bar?

 

Oh, and I didn't put the Opacity 0 in my nav, because it make the text invisible after the animation.

 

Thank you and I know that I'm annoying. I'm just trying some stuffs.

[dsonesuk]

Its a reference to keyframes name see http://www.w3schools.com/css/tryit.asp?filename=trycss3_animation1

[Nic727]

I did that, but the text still appear before the animation launch.

 

Like :

 

text appear -- 0.5 sec later, it's invisible and launch the animation.

nav{	animation-name: app;    animation-duration: 2s;}@keyframes app {    from {opacity: 0;}    to {opacity: 1;}}

But for the banner it's not like that.

 

 animation: reveal-banner 1s 0.25s ease-in-out;

I don't know what that mean, but for the banner, it's :

 

banner is invisible -- after 0.5 sec it start to appear.

[dsonesuk]

http://www.w3schools.com/css/css3_animations.asphttp://www.w3schools.com/css/tryit.asp?filename=trycss3_animation_speed

[Nic727]

Thank you