CSS3滚动动画不起作用
[英]CSS3 scroll animation doesn't work
问题描述
我做了一个向下滚动动画按钮，但动画不起作用。 我不知道什么是错的。 我用-webkit-animation: sdb10 2s infinite尝试了它-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>
2 个解决方案
解决方案1
0 2016-08-11 13:12:41
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>
解决方案2
0 2016-10-25 14:31:09
你忘了包含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;
}
}
对于动态创建的元素，Css3变换动画在IE 11中不起作用
[英]Css3 transform animation doesn't work in IE 11 for a dynamically created element
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.