为什么这不是动画？

我想移动背景，但它似乎相当卡住。我该如何移动它？为什么这不是动画？

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

为什么这不是动画？

回答

相关问题