Velocity.js不透明性无法正常工作

Question

I am having problems with animations using velocity.js.

Here is a Codepen link.

PROBLEM:

After the navigation element fades in, the logo and "MY WEBSITE" title momentarily fades out and fades in again.

CODE:

HTML:

<div id="header">
    <div id="logo">
        <img src="Images/logo.png" />
    </div>

    <h1 id="logo-title">MY WEBSITE</h1>

    <div id="nav-bar">
        <ul>
            <li><a href="">HOME</a></li>
            <li><a href="">ABOUT US</a></li>
            <li><a href="">PROJECTS</a></li>
            <li><a href="">CONTACT</a></li>
        </ul>
    </div>
</div>

CSS:

*
{
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    color: white;
    background-color: black;
}
#header
{
    width: 100%;
    height: 150px;
    background-color: black;
}
#logo
{
    width: 25%;
    height: 100%;
    float: left;
    opacity: 0;
}
#logo img
{
    width: 100%;
    height: 100%;
}
#logo-title
{
    width: 25%;
    float: left;
    line-height: 150px;
    opacity: 0;
}
#nav-bar
{
    width: 100%;
    height: 150px;
    opacity: 0;
}
#nav-bar ul
{
    list-style-type: none;
    overflow: hidden;
}
#nav-bar li
{
    float: left;
    width: 25%;
    height: 150px;
}
#nav-bar li a
{
    display: block;
    text-align: center;
    text-decoration: none;
    line-height: 150px;
}
#nav-bar a:hover
{
    background-color: #333;
}

JavaScript (Velocity.js):

Velocity(document.getElementById("logo"), {opacity: 1}, {duration: 4000});

Velocity(document.getElementById("logo-title"), {opacity: 1}, {delay: 2000, duration: 4000});

Velocity(document.getElementById("nav-bar"), {opacity: 1}, {delay: 4000, duration: 4000});

I can't seem to find the problem. Any suggestions will be appreciated. Thanks.

Answer 1

I looked up your pen, and the pen seems to work fine if you just remove float: left from your logo and logo-title class. So may be you can remove floats and make div according to that. I am not sure why is this happening. May be you can raise an issue on github.