javascript - 弹跳箭头 css - 不起作用？

Question

我正在尝试混合使用三种不同的东西。滚动后出现在屏幕中间的菜单、弹跳箭头和单击后打开的侧边菜单。

这是一个包含所有这些“尝试”的示例页面:http://www.new.techmoney360.com/youll-never-look-at-an-rpg-the-same-again/ (顺便说一句，它是在 wordpress 中制作的)

如果向下滚动一半，您会看到菜单出现在左侧。

我可以看到很多问题，但我会在进行时解决它们。目前让我发疯的是一个弹跳箭头。

这就是我要复制的内容: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(关于弹跳箭头):

@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

您的问题很可能是您按原样使用示例代码笔链接中的 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 包含 vendor 前缀，因此它可以跨浏览器工作。