无法获取CSS3动画在我的网站上工作

-2

我想要获得弹跳鼠标动画以在我的网站上工作。完全相同的代码可以在另一个网站上使用，而在我的网站上它只是不会做任何事情。无法获取CSS3动画在我的网站上工作

这里的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/

来源

2015-03-30 imjp

'todown'的关键帧在哪里？ – APAD1 2015-03-30 20:00:46

另外，您需要查看用于跨浏览器动画兼容性的正确前缀。 '-moz-'，'-webkit -'等。 – Adjit 2015-03-30 20:02:22

关键帧？我不知道如何设置这些。我会添加其他人以及它的工作（moz webkit等） – imjp 2015-03-30 20:25:49

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

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

由于火狐15不需要-moz供应商名称，但Chrome和其他WebKit浏览器仍然需要-webkit-动画：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

来源

2015-03-30 21:55:34 Dirk

退房跨浏览器兼容性

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

来源

2015-03-30 20:32:07

无法获取CSS3动画在我的网站上工作

回答

相关问题