CSS3のスクロールアニメーションが機能しない

私はスクロールダウンのアニメーションボタンを作成しましたが、アニメーションは機能しません。私は何が間違っているのか分かりません。私は-webkit-animation: sdb10 2s infiniteとanimation: sdb10 2s infiniteで試しましたが、効果がないようです。CSS3のスクロールアニメーションが機能しない

.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 { 
 
\t position: absolute; 
 
\t bottom: -20px; 
 
\t left: 50%; 
 
\t width: 18px; 
 
\t height: 18px; 
 
\t content: ''; 
 
\t margin-left: -9px; 
 
\t border-left: 2px solid #1F1F1F; 
 
\t border-bottom: 2px solid #1F1F1F; 
 
\t -webkit-transform: rotate(-45deg); 
 
\t transform: rotate(-45deg); 
 
\t -webkit-animation: sdb05 1.5s infinite; 
 
\t animation: sdb05 1.5s infinite; 
 
\t box-sizing: border-box; 
 
}

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

出典

2016-08-11 Johnny97

をあなたの 'keyframes'を含めるようにあなたの質問を更新してください'アニメーション' – Shaggy

@Shaggyキーフレームとはどういう意味ですか？ – Johnny97

「アニメーションの使い方」（https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations）を参照する必要があります。 – Shaggy

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>

出典

2016-08-11 13:12:41 satwick

だと思います。これはあなたが望むものだと思います – satwick

D; D; D; D; D – Johnny97

あなたはスクロールがうまくいかないと言いました。スクロールするだけの効果があります。 – satwick

あなたは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; 
    } 
}

出典

2016-10-25 14:31:09

CSS3のスクロールアニメーションが機能しない

答えて

関連する問題