CSS3滚动动画不起作用答案

【问题标题】：CSS3 scroll animation doesn't workCSS3滚动动画不起作用
【发布时间】：2016-12-18 04:52:16
【问题描述】：

我制作了一个向下滚动的动画按钮，但动画不起作用。我不知道怎么了。我已经用-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>

【问题讨论】：

请更新您的问题以包括您的animation 的keyframes。
@Shaggy 关键帧是什么意思？
你需要阅读how to use animations。
@Shaggy 这就是重点！知道了，谢谢

标签： html css animation scroll

【解决方案1】：

您忘记包含 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;
    }
}

【讨论】：

【解决方案2】：

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>

【讨论】：

我想这就是你想要的
不这么认为 ;D ;D
你说滚动不起作用，我发布的只是滚动的效果，我只是增加了时间