Question

我第一次在网站上使用Animate CSS; 在这种情况下，我在主页面标题上使用了fadeInLeft;

我的问题是，页面短暂加载标题，然后标题消失并执行Animate CSS（淡入淡出）。我怎样才能让它只是在没有简单地显示标题之前执行Animate？

此开发阶段中存在的网站可在此处找到。你可以看到会发生什么; Dev Website

我的HTML代码（向下滚动到＆＃39; Main＆＃39;部分以查看Animate的使用位置）：

<!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">
.....

Answer 1

您可以使用CSS @keyframes实现此效果。

工作示例：

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>

动画CSS - 在标题上

1 个答案: