动画css不工作

Question

我必须动态地移动图像。但不起作用。这里我的css和html代码。

​

.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>

​

Answer 1

希望这能解决你的问题，试试这个：

.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;
}

谢谢。