튀는 화살 css - 작동하지 않습니까?

Question

저는 세 가지 다른 것들을 혼합하려고합니다. 스크롤 한 후 화면의 중간에 나타나는 메뉴, 수신 거부 화살표 및 한 번 클릭하면 열리는 사이드 메뉴. 당신이 절반 방법 아래로 스크롤하면

, 당신은 메뉴가 왼쪽에 나타납니다 볼 수 http://www.new.techmoney360.com/youll-never-look-at-an-rpg-the-same-again/이 이 (가 BTW 워드 프레스에서 만든) :

이이 "시도"모두와 예제 페이지가 만들어지고있다 .

내가 볼 수있는 문제는 많지만 내가 간다대로 해결할 것입니다. 현재 나를 괴롭히는 것은 튀는 화살입니다. https://codepen.io/dodozhang21/pen/siKtp

화살표는 반송하지 않으며, 내가 왜 확실하지 않다 :

이것은 내가 복제하려고 무엇인가? 나는 왼쪽에있는 화살표에 대한 새로운 이미지를 얻었고 정확하게 놓았다. 누구든지 조언을 해줄 수 있습니까? 여기

내가이를 구현하려고 한 일에 대한 코드입니다 :

HTML : (수신 거부 화살표에 대한)

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

CSS : apearing 메뉴와

@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 :

.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

당신의 문제는 당신이 예제 codepen 링크의 CSS를 그대로 사용하고 있지만 CSS에 대해 같은 종류의 전 처리기를 사용하고 있지 않다는 것입니다. 부여 이것을 다음에 .bouncs 및 @keyframes의 CSS를 변경하려고 :

.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); 
    } 
} 

를 지금 다음 SASS 또는 SCSS 또는 CSS 프리 프로세서의 어떤 종류를 사용하지 않는 작동합니다. 사용하고자하는 CSS를 보려면 codepen의 css 창의 오른쪽 상단에있는 "컴파일 된보기"버튼을 눌러야합니다. 그것은 당신이 컴파일러를 통과하지 않고 사용할 수있는 CSS를 뱉어 낼 것이다. 또한이 CSS에는 공급 업체 접두사가 포함되어있어 크로스 브라우저에서 작동합니다.