CODEWITHSUNDEEP
htmlcssanimate.css
BlissSol
BlissSol

Reputation: 418

Animate CSS - on Header

I'm using Animate CSS for the first time on a Website; In this case I'm using fadeInLeft on a main page header;

My problem is, the page loads the header briefly, then the header disappears and performs the Animate CSS (fade in left). How Can I get it to just perform the Animate without briefly displaying the header before hand?

The website as it exist within this development stage can be found here & you can see what happens; Dev Website

My HTML code (Scroll down to the 'Main' section to see where Animate is used):

<!DOCTYPE HTML>

<html>
    <head>
        <title>WIZNU FOR HAIR</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
        <link rel="stylesheet" href="assets/css/main.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
        <!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
        <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
    </head>
    <body>

        <!-- Page Wrapper -->
            <div id="page-wrapper">

                <!-- Header -->
                    <header id="header">
                        <h1><a href="index.html"><span style="color:red;">W</span><span style="color:white;">iznu</span></a></h1>
                        <nav id="nav">
                            <ul>
                                <li class="special">
                                    <a href="#menu" class="menuToggle"><span>Menu</span></a>
                                    <div id="menu">
                                        <ul>
                                            <li><a href="index.html">Home</a></li>
                                            <li><a href="products.html">Products</a></li>
                                            <li><a href="services.html">Services</a></li>
                                            <li><a href="contact.html">Contact Us</a></li>
                                        </ul>
                                    </div>
                                </li>
                            </ul>
                        </nav>
                    </header>

                <!-- Main -->
                    <article id="main">
                        <header>
                            <h2 class="animated fadeInLeft"><span style="color:red;">O</span><span style="color:white;">ur<span> <span style="color:red;">P</span><span style="color:white;">roducts</span></h2>
                        </header>
                        <section class="wrapper style5">
                            <div class="inner">
.....

Upvotes: 1

Views: 1526

Answers (1)

Rounin
Rounin

Reputation: 29491

You can achieve this effect using CSS @keyframes.

Working Example:

body {
background-color: rgb(63, 63, 63);
}

h1 {
color: rgb(255, 255, 255);
text-align: center;
text-transform: uppercase;
}

h1 span {
display: inline-block;
opacity: 1;
transform: translateX(0);
animation: enterFromLeft 1.5s ease-out;
}

h1 span:first-letter {
color: rgb(255, 0, 0);
}

@keyframes enterFromLeft {
  0% {opacity: 0; transform: translateX(-100vw);}
 33% {opacity: 1; transform: translateX(-100vw);}
100% {transform: translateX(0);}
}
<h1><span>Our</span> <span>Products</span></h1>

Upvotes: 1

Related Questions