2015-07-03 109 views
0

我必须动态滑动图像。但它不起作用。 在这里我的CSS和HTML代码。动画CSS不起作用

.demo-section{ 
 
    background: url('http://xxxxx/images/homepages/faces.png') repeat scroll 0 0 transparent; 
 
    -webkit-animation: sliding 60s linear infinite; 
 
    -moz-animation: sliding 60s linear infinite; 
 
    -ms-animation: sliding 60s linear infinite; 
 
    -o-animation: sliding 60s linear infinite; 
 
    animation: sliding 60s linear infinite; 
 
    padding: 55px 0 45px; 
 
}
<div class="demo-section"> 
 
    <h1>Demo Content</h1> 
 
</div>

+6

您是否确实[定义您的动画](https://developer.mozilla.org/en/docs/Web/CSS/@keyframes)?如果是这样,那么发布该代码也是一个好主意。 – vvye

回答

1

希望这将解决ū[R问题,试试这个:

.demo-section{ 
    background: url('http://xxxxx/images/homepages/faces.png') no-repeat scroll 0 0 transparent; 
    -webkit-transition: left 3s; /* For Safari 3.1 to 6.0 */ 
    transition: left 3s; 
    left:10px; 
    position:relative; 
    padding: 55px 0 45px; 
} 

div:hover { 
    left: 100px; 
} 

感谢。