沒有產生任何動畫效果的關鍵幀

我想在CSS中做一個快速動畫，我很難做到這一點。當我將鼠標懸停在圖像上時，其目標是將圖像滑動到左側。我哪裏錯了？我收到「對不起，規則@ -webkit關鍵幀未實現。」在validator.org這裏是CSS和HTML代碼。沒有產生任何動畫效果的關鍵幀

CSS：

body { 
    background-color:#d9d6cb; 
} 
#title { 
    font-family:Agency FB; 
    text-shadow:5px 0px 3px gray; 
    text-align:center; 
} 
#mygallery{ 
    width:580px; 
    padding:20px; 
    margin-left: auto; 
    margin-right: auto; 
    background:black; 
} 
#fullimage 
{ 
    list-style:none; 
    width:580px; 
    height:400px; 
    margin:0; 
    padding:0; 
    overflow:hidden; 
} 
#thumbimage 
{ 
    list-style:none; 
    overflow:auto; 
    float:right; 
    margin-left:5px; 
    border-color:white; 
    opacity:.5; 
} 
#thumbimage:hover{ 
    opacity:1; 
    -webkit-animation: slideImage 1s; 
    animation: slideImage 1s; 
} 
@-webkit-keyframes slideImage{ 
    0%:{left:-700px;} 
    100%{left:0px;} 
}

HTML：

<head> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
    <title>Index</title> 
    <link rel="stylesheet" type="text/css" href="Gallery/CSS/style.css"> 
</head> 

<body> 
    <h1 id="title"> Image Gallery </h1> 

    <div id="mygallery"> 
     <ul id="fullimage"> 
      <li> 
       <img id="house" src="Gallery/Images/House.jpg" alt="House" width="580"> 
       <p><span> House </span> 
       </p> 
      </li> 
      <li> 
       <img id="tree" src="Gallery/Images/tree.jpg" alt="Tree" width="580"> 
       <p><span> Tree </span> 
       </p> 
      </li> 
      <li> 
       <img id="hobbithole" src="Gallery/Images/HobbitHole.jpg" alt="Hobbit Hole" width="580"> 
       <p><span> Hobbit Hole </span> 
       </p> 
      </li> 
      <li> 
       <img id="horses" src="Gallery/Images/horses.jpg" alt="Horses" width="580"> 
       <p><span> Horses </span> 
       </p> 
      </li> 
     </ul> 
     <ul id="thumbimage"> 
      <li><a href="Gallery/Images/House.jpg"><img src ="Gallery/Images/House.jpg" alt = "House" width = "50"></a> 
      </li> 
      <li><a href="Gallery/Images/tree.jpg"><img src ="Gallery/Images/tree.jpg" alt = "tree" width = "50"></a> 
      </li> 
      <li><a href="Gallery/Images/HobbitHole.jpg"><img src ="Gallery/Images/HobbitHole.jpg" alt = "Hobbit Hole" width = "50"></a> 
      </li> 
      <li><a href="Gallery/Images/horses.jpg"><img src ="Gallery/Images/horses.jpg" alt = "horses" width = "50"></a> 
      </li> 
     </ul> 
    </div> 
</body>

來源

2014-10-10 user1294476

你能做出的jsfiddle？您的HTML結構也很重要 – Raptor 2014-10-10 06:55:42

在類'thumbimage'上增加位置或將'left：-700px'更改爲'margin-left' – 2014-10-10 07:18:02

在'0％：{left：-700px;}'似乎存在拼寫錯誤。那裏不需要'：'。 – Harry 2014-10-10 07:22:00

這裏我做了簡單的例子，請CHEC K掉，並做出改變按您的要求：

Check JSFiddle

CSS：

@-webkit-keyframes slideImage{ 
0%:{left:-0px;} 
100%{left:20px;} 
} 
body { 
background-color:#d9d6cb; 
} 

#myimg{ 
    position:relative; 
    left:200px; 
    opacity:0.8; 
    width:100px; 
    height:100px; 
    padding:20px; 
    background:black; 
} 

#myimg:hover{ 
    opacity:1; 
    -webkit-animation: slideImage 2s; 
    animation: slideImage 1s; 
}

來源

2014-10-10 07:14:57

我仍然無法弄清楚。這是隨附的HTML代碼。我試圖讓縮略圖像滑動。 – user1294476 2014-10-10 07:37:49

查看JSFiddle-- http://jsfiddle.net/d0xoLnua/3/ – 2014-10-10 07:58:30

感謝您的幫助！ – user1294476 2014-10-10 08:10:35

沒有產生任何動畫效果的關鍵幀

回答

相關問題