加載css3過渡動畫？是否可以在不使用Javascript的情況下在頁面加載時使用CSS3過渡動畫？這是我想要的，但在頁面加載：http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html到目前為止我發(fā)現(xiàn)了什么CSS3 transition-delay，一種延遲元素影響的方法。僅適用于懸停。CSS3關鍵幀，在加載時工作，但速度極慢。因此沒用。CSS3過渡速度足夠快，但不會在頁面加載時設置動畫。
3 回答
狐的傳說
TA貢獻1804條經(jīng)驗 獲得超3個贊
您可以在頁面加載時運行CSS動畫而無需使用任何JavaScript; 你只需要使用CSS3關鍵幀。
我們來看一個例子......
以下是僅使用CSS3滑動到位的導航菜單的演示：
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}}header {
/* This section calls the slideInFromLeft animation we defined above */
animation: 1s ease-out 0s 1 slideInFromLeft;
background: #333;
padding: 30px;}/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}<header> <a href="#">Home</a> <a href="#">About</a> <a href="#">Products</a> <a href="#">Contact</a></header>
分解......
這里的重要部分是關鍵幀動畫，我們稱之為slideInFromLeft......
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
...基本上說“在開始時，標題將從屏幕的左邊緣以其整個寬度離開，并且最后將到位”。
第二部分是調用slideInFromLeft動畫：
animation: 1s ease-out 0s 1 slideInFromLeft;
以上是速記版本，但為了清晰起見，這里是詳細版本：
animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */
你可以做各種有趣的事情，比如滑動內容，或引起對區(qū)域的注意。
慕哥6287543
TA貢獻1831條經(jīng)驗 獲得超10個贊
很少有Javascript是必要的：
window.onload = function() {
document.body.className += " loaded";}現(xiàn)在的CSS：
.fadein {
opacity: 0;
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;}body.loaded .fadein {
opacity: 1;}我知道問題是“沒有Javascript”，但我認為值得指出的是，有一個簡單的解決方案涉及一行Javascript。
它甚至可以是內聯(lián)Javascript，類似的東西：
<body onload="document.body.className += ' loaded';" class="fadein">
這就是所有需要的JavaScript。
楊魅力
TA貢獻1811條經(jīng)驗 獲得超6個贊
我覺得我已經(jīng)找到了OP問題的一種解決方法 - 而不是從頁面的'on.load'開始的過渡 - 我發(fā)現(xiàn)使用動畫來實現(xiàn)不透明效果的效果相同，（我一直在尋找與OP相同的事情。
所以我希望在頁面加載時將正文文本從白色（與網(wǎng)站背景相同）淡入到黑色文本顏色 - 而且我從星期一開始只編碼所以我正在尋找'on.load'樣式的事物代碼，但是還不知道JS - 所以這里的代碼對我來說效果很好。
#main p {
animation: fadein 2s;}@keyframes fadein {
from { opacity: 0}
to { opacity: 1}}而無論出于何種原因，這并不對工作.class只#id的（至少不是我的）
希望這會有所幫助 - 我知道這個網(wǎng)站對我有很大的幫助！
添加回答
舉報
0/150
提交
取消