CSS3滚动动画不起作用
Posted
技术标签:
【中文标题】CSS3滚动动画不起作用【英文标题】：CSS3 scroll animation doesn't work 【发布时间】：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 这就是重点！知道了，谢谢
【参考方案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 你说滚动不起作用，我发布的只是滚动的效果，我只是增加了时间以上是关于CSS3滚动动画不起作用的主要内容，如果未能解决你的问题，请参考以下文章