爲什麼這不是動畫？

我想移動背景，但它似乎相當卡住。我該如何移動它？爲什麼這不是動畫？

body { 
 
    background-color: black !important; 
 
} 
 
#background_div { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    animation-name: background_animation; 
 
} 
 
@keyframes background_animation { 
 
    0% { 
 
    transform: translate(0%, -100%) scale(4, 4); 
 
    } 
 
    25% { 
 
    transform: translate(100%, 0%) scale(5, 5); 
 
    } 
 
    50% { 
 
    transform: translate(50%, 100%) scale(6, 6); 
 
    } 
 
    100% { 
 
    transform: translate(0%, -100%) scale(4, 4); 
 
    } 
 
}

<div id="background_div"></div>

https://jsfiddle.net/5he2otzL/

來源

2016-04-22 clankill3r

你的情況的問題是，你只設置animation-name到#background_div，但沒有爲animation-duration設置任何值。 animation-duration的默認值是0s，而animation-fill-mode的默認值是none。所以，根據spec，動畫沒有明顯的效果。

以下是specs摘錄:(重點是我的）。

如果<時間>爲0s，就像初始值，動畫的關鍵幀沒有任何效果，但動畫本身仍然出現瞬間。具體而言，開始和結束事件被觸發;如果動畫填充模式被設置爲向後或兩者，動畫延遲期間將顯示由動畫方向定義的動畫的第一幀。然後，如果animation-fill-mode設置爲forward或者兩者都同時顯示動畫方向定義的最後一幀動畫。 如果animation-fill-mode設置爲none，那麼動畫沒有可見的效果。

一旦你設置了一些不是0的值到animation-duration屬性，動畫工作正常。

body { 
 
    background-color: black !important; 
 
} 
 
#background_div { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 0; 
 
    z-index: -1; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"); 
 
    background-position: center; 
 
    background-repeat: no-repeat; 
 
    animation-name: background_animation; 
 
    animation-duration: 2s; /* set this */ 
 
} 
 
@keyframes background_animation { 
 
    0% { 
 
    transform: translate(0%, -100%) scale(4, 4); 
 
    } 
 
    25% { 
 
    transform: translate(100%, 0%) scale(5, 5); 
 
    } 
 
    50% { 
 
    transform: translate(50%, 100%) scale(6, 6); 
 
    } 
 
    100% { 
 
    transform: translate(0%, -100%) scale(4, 4); 
 
    } 
 
}

<div id="background_div"></div>

來源

2016-04-22 15:37:23 Harry

-1

body { 
     background-color: black !important; 
} 

#background_div { 
     position: absolute; 
     left: 0; 
     top: 0; 
     bottom: 0; 
     right: 0; 
     z-index: -1; 
     width: 100%; 
     height: 100%; 
    background-image: url("http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"); 
    background-position: center; 
    background-repeat: no-repeat; 
-webkit-animation: background_animation 5s infinite; /* Chrome, Safari, Opera */ 
    animation: background_animation 5s infinite; 

} 


@keyframes background_animation { 
    0% { 
     transform: translate(0%,-100%) scale(4,4); 
    } 
    25% { 
     transform: translate(100%,0%) scale(5,5); 
    } 
    50% { 
     transform: translate(50%,100%) scale(6,6); 
    } 
    100% { 
     transform: translate(0%,-100%) scale(4,4); 
    } 
}

固定爲您希望它幫助，

易曰： http://www.w3schools.com/cssref/css3_pr_animation.asp

https://jsfiddle.net/5he2otzL/

來源

2016-04-22 15:21:10

爲什麼這不是動畫？

回答

相關問題