Bouncing-Pfeil CSS - funktioniert nicht?

Question

Ich versuche eine Mischung aus drei verschiedenen Dingen zu machen. Ein Menü, das nach dem Scrollen auf halbem Bildschirm angezeigt wird, ein Springpfeil und ein Seitenmenü, das nach dem Klicken geöffnet wird.

Dies ist ein Beispiel-Seite mit all diesen „Versuche“ gemacht werden: http://www.new.techmoney360.com/youll-never-look-at-an-rpg-the-same-again/ (es btw in Wordpress gemacht)

Wenn Sie unten auf halbem Weg blättern, werden Sie das Menü auf der linken Seite erscheinen sehen .

Es gibt Unmengen von Problemen mit diesem kann ich sehen, aber ich werde sie beheben, wie ich gehe. Derzeit ist derjenige, der mich verrückt macht, ein hüpfender Pfeil.

Dies ist, was ich zu replizieren versuchen: https://codepen.io/dodozhang21/pen/siKtp

Der Pfeil prallt nicht, und ich bin nicht sicher, warum? Ich habe ein neues Bild für den Pfeil links, richtig positioniert und so. Kann mir jemand einen Rat geben? Hier

ist der Code für das, was ich getan habe versucht, dies zu implementieren:

html:

<div id="sliderr" > 
    <div class="arrow bounce"> 
    </div> 
    <span style="font-size:30px;cursor:pointer;" onclick="openNav()">Explore More</span> 
</div> 

CSS (in Bezug auf die hüpfenden Pfeil):

@import "compass/css3"; 

@include keyframes(bounce) { 
    0%, 20%, 50%, 80%, 100% { 
     @include transform(translateY(0)); 
     } 
     40% { 
     @include transform(translateY(-30px)); 
     } 
     60% { 
     @include transform(translateY(-15px)); 
     } 
} 

.arrow { 
    position: fixed; 
    bottom: 40%; 
    left: 0; 
    margin-left:-20px; 
    width: 40px; 
    height: 40px; 
    background-image: url("http://www.new.techmoney360.com/wp-content/uploads/2016/06/left-arrow-a.png"); 
    background-size: contain; 
} 

.bounce { 
@include animation(bounce 2s infinite); 
} 

css mit apearing Menü :

.sidenav { 
    height: 100%; 
    width: 0; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: #111; 
    overflow-x: hidden; 
    transition: 0.5s; 
    padding-top: 60px; 
} 

.sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: 0.3s 
} 

.sidenav a:hover, .offcanvas a:focus{ 
    color: #f1f1f1; 
} 

.closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 36px !important; 
    margin-left: 50px; 
} 

#sliderr { 
    position:fixed; 
    top: 100px; 
    left: 0px; 
    height: 300px; 
    width: 130px; 
    background: #FFF; 
    margin-left: -200px; 
    z-index:9; 
} 

@media screen and (max-height: 450px) { 
    .sidenav {padding-top: 15px;} 
    .sidenav a {font-size: 18px;} 
} 

Answer 1

Wahrscheinlich liegt Ihr Problem darin, dass Sie das CSS aus dem Codepen-Beispiel verwenden, aber Sie verwenden nicht die gleiche Art von Präprozessor für Ihr CSS. Geben Sie diesem einen Versuch ändern Ihre .bouncs und @keyframes CSS auf die folgenden:

.bounce { 
    -moz-animation: bounce 2s infinite; 
    -webkit-animation: bounce 2s infinite; 
    animation: bounce 2s infinite; 
} 

@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -moz-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -moz-transform: translateY(-30px); 
    transform: translateY(-30px); 
    } 
    60% { 
    -moz-transform: translateY(-15px); 
    transform: translateY(-15px); 
    } 
} 

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-30px); 
    transform: translateY(-30px); 
    } 
    60% { 
    -webkit-transform: translateY(-15px); 
    transform: translateY(-15px); 
    } 
} 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    -webkit-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -moz-transform: translateY(-30px); 
    -ms-transform: translateY(-30px); 
    -webkit-transform: translateY(-30px); 
    transform: translateY(-30px); 
    } 
    60% { 
    -moz-transform: translateY(-15px); 
    -ms-transform: translateY(-15px); 
    -webkit-transform: translateY(-15px); 
    transform: translateY(-15px); 
    } 
} 

Wenn es funktioniert werden Sie jetzt dann nicht SASS oder SCSS verwenden oder irgendeine Art von CSS-Präprozessor. Um die CSS zu sehen, die Sie verwenden müssen, klicken Sie auf die Schaltfläche "Compiled anzeigen" oben rechts im css-Fenster auf dem Codepen. Es spuckt CSS aus, das Sie verwenden können, ohne es durch einen Compiler zu übergeben. Beachten Sie auch, dass dieses css Vendor Prefixes enthält, so dass es cross-Browser funktioniert.