無法獲取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動畫在我的網站上工作

回答

相關問題