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

【问题标题】：Can't get CSS3 animation to work on my website无法让 CSS3 动画在我的网站上运行
【发布时间】：2015-03-31 05:55:34
【问题描述】：

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

这是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/

【问题讨论】：

todown 的关键帧在哪里？
另外，您需要查看正确的前缀以实现跨浏览器动画兼容性。 -moz-、-webkit- 等
关键帧？我不知道如何设置这些。一旦它工作（moz webkit等），我也会添加其他人
这是我正在尝试重新创建的动画箭头：themeforest.net/item/…

标签： css css-animations

【解决方案1】：

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

幸运的是，您链接的主题上的 CSS 并未缩小或其他任何内容，因此您只需复制/粘贴您想要重新创建的部分即可。

由于 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

【讨论】：

【解决方案2】：

查看跨浏览器兼容性

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

【讨论】：