无法在我的网站上运行 CSS3 动画

Question

我正在尝试让弹跳鼠标动画在我的网站上运行。完全相同的代码在另一个网站上有效，而在我的网站上它什么也没做。

这是 css：

.mouse {  
    display: block;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    font-size: 32px; 
    color: #fff;
    z-index:9999;
    position: absolute;
    color: #e8e8e8;;
    bottom: 240px;
}   
.mouse i {
    -webkit-animation: todown 1.2s infinite linear;
    transition: all 0.3s ease-in-out;
}

HTML:

<a href="#x11" class="mouse">
    <i class="fa fa-angle-double-down icon-option"></i>
</a>

在此网站上，您可以看到我正在尝试创建的向下滚动图标：http://noxxar.com/demo/uralco/

Answer 1

检查跨浏览器兼容性

.mouse i {
     -webkit-animation: todown 1.2s linear infinite;
      animation: todown 1.2s linear infinite;
}

@-webkit-keyframes todown {
    0% {
       -webkit-transform: translateY(0px);
        transform: translateY(0px);
    }
  50% {
      -webkit-transform: translateY(5px);
        transform: translateY(5px);
 }
}

@keyframes todown {
  0% {
       -webkit-transform: translateY(0px);
        transform: translateY(0px);
 }
 50% {
       -webkit-transform: translateY(5px);
        transform: translateY(5px);
  }
}

Answer 2

如果你想使用 CSS 动画你需要定义 @keyframes.

幸运的是，您链接的主题上的 CSS 没有缩小或任何东西，所以您可以 copy/paste 您想要重新创建的部分。

自 Firefox 15 以来，不需要 -moz 供应商前缀，但 Chrome 和其他 Webkit 浏览器仍然需要 -webkit-animation：http://caniuse.com/#feat=css-animation

CSS:

#to-slider-scrollto i {
    -webkit-animation: todown 1.2s infinite linear;
    animation: todown 1.2s infinite linear;
}

#to-slider-scrollto i:hover {
    -webkit-animation: none;
    animation: none;
}

@-webkit-keyframes todown {
    0% {
        -webkit-transform: translateY(-15px);
        opacity: 0;
    }
    10% {
        -webkit-transform: translateY(-15px);
        opacity: 0;
    }
    50% {
        -webkit-transform: translateY(0);
        opacity: 1;
    }
    90% {
        -webkit-transform: translateY(15px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(15px);
        opacity: 0;
    }
}
@keyframes todown {
    0% {
        transform: translateY(-15px);
        opacity: 0;
    }
    10% {
        transform: translateY(-15px);
        opacity: 0;
    }
    50% {
        transform: translateY(0);
        opacity: 1;
    }
    90% {
        transform: translateY(15px);
        opacity: 0;
    }
    100% {
        transform: translateY(15px);
        opacity: 0;
    }
}

Working codepen demo 只需要 CSS

无法在我的网站上运行 CSS3 动画

Can't get CSS3 animation to work on my website

css

css-animations