Wordpress Fade Out Page Transition


I have a client site that (unadvisedly) wants to use a splash page on their site.  The splash page needs to fade in, then disappear on its own after 3 seconds.  When it disappears, it should show the regular home page.  I have found a couple of plugins that do page transitions, but none of them will work on individual pages. And they only need this effect on the splash page.

I have playing around with CSS animation fadeout but have not been successful in getting it to fade out correctly.

   -webkit-animation:fadeout 0.3s; 
   animation:fadeout 0.3s;
@-webkit-keyframes fadeout { from {opacity:1} to {opacity:0} }
@keyframes fadeout { from {opacity:1} to {opacity:0} }

Open in new window

This is a link the development site's splash page

This is a link to the homepage that should appear after the splash page fades out.

Any help would be greatly appreciated.
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

greetings  tiabradford1984, , I would not think you are going about this the correct way, you have two different PAGES, and a fade from one to the other, will not be a smooth transition, because the web address chances (goes to another web page).

Your splash page at     http://tbailey.howitworks.com/, is primarily an Image ( T. Baily Inc. ) On top of a page dark green "Cover <div>"

You will have better success if you just create the  dark green "Cover <div>" with image as a cover for the Home page, , and then fade the  dark green "Cover <div>" Out to transparent and then hide or destroy the cover <div>, , , , , , and that will expose the home page beneath it.

you may should use another fade using transitions, as outlined in this article -
What happens if you try this (note a space character between body and .page-id-385)?
body .page-id-385{
    -webkit-animation: fadeout 0.3s;
    animation: fadeout 0.3s;

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.