CSS3滚动动画不起作用。

Question

CSS3滚动动画不起作用。

3

我制作了一个滚动下拉动画按钮，但是动画不起作用。我不知道哪里出了问题。我尝试使用-webkit-animation: sdb10 2s infinite和animation: sdb10 2s infinite，但看起来没有效果。

.scrolldown span {
    position: absolute;
    top: 0;
    width: 30px;
    height: 50px;
    border: 2px solid #1F1F1F;
    border-radius: 50px;
    box-sizing: border-box;
}
.scrolldown {
    position: fixed;
    width: 30px;
    height: 75px;
    bottom: -25px;
    left: 50%;
    z-index: 2;
    display: inline-block;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    letter-spacing: .1em;
    text-decoration: none;
    transition: opacity .3s;
}
.scrolldown span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #1F1F1F;
    border-radius: 100%;
    -webkit-animation: sdb10 2s infinite;
    animation: sdb10 2s infinite;
    box-sizing: border-box;
}
.scrolldown span::after {
 position: absolute;
 bottom: -20px;
 left: 50%;
 width: 18px;
 height: 18px;
 content: '';
 margin-left: -9px;
 border-left: 2px solid #1F1F1F;
 border-bottom: 2px solid #1F1F1F;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-animation: sdb05 1.5s infinite;
 animation: sdb05 1.5s infinite;
 box-sizing: border-box;
}

<div class="scrolldown">
 <span></span>
</div>

- user6580560

请更新您的问题，包括您动画的“关键帧”。 - Shaggy

@Shaggy，你说的关键帧是什么意思？ - user6580560

看起来你需要阅读关于如何使用动画的相关资料。请参考此链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations。 - Shaggy

@Shaggy 这就是重点！明白了，谢谢。 - user6580560

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- satwick · Answer 1

body {
    width: 100%;
    height: 100%;
}

html {
    width: 100%;
    height: 100%;
}

@media(min-width:767px) {
    .navbar {
        padding: 20px 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .top-nav-collapse {
        padding: 0;
    }
}


.intro-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

.about-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

.services-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #fff;
}

.contact-section {
    height: 100%;
    padding-top: 150px;
    text-align: center;
    background: #eee;
}

<!DOCTYPE html>
<html lang="en">

<head>

   
    <title>Bubbology</title>

   
    <link href="css/maincss/bootstrap.min.css" rel="stylesheet">


    <link href="css/maincss/scrolling-nav.css" rel="stylesheet">

   

</head>



<body id="page-top" data-spy="scroll" data-target=".navbar-fixed-top">

   
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top"></a>
            </div>

           
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">
                   
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#about">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#services">Services</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
          
        </div>
      
    </nav>


 
    <section id="about" class="about-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>About Section</h1>
                </div>
            </div>
        </div>
    </section>

  
    <section id="services" class="services-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Services Section</h1>
                </div>
            </div>
        </div>
    </section>

    <!-- Contact Section -->
    <section id="contact" class="contact-section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1>Contact details</h1>
                 <div style="float:left;"><p>Mobile No:</p></div>
                     <div style="float:left;"><p></p></div>
                </div>
                    <div style="float:left;" >
                 <p><a>Contact Us:</a></p>
                </div>
                 <div style="float:left;">
                 <p><a href=""></a></p>
                </div>
            </div>
        </div>
    </section>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Scrolling Nav JavaScript -->
    <script src="js/jquery.easing.min.js"></script>
    <script src="js/scrolling-nav.js"></script>

</body>

</html>

- lukas gurschler · Answer 2

你忘记包含 CSS3 动画本身了：

@-webkit-keyframes sdb10 {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        -webkit-transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes sdb10 {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        transform: translate(0, 20px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}