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

如果您想使用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

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

无法在我的网站上使用CSS3动画

2 个答案: