Ключевые кадры, не создающие анимационный эффект

Я пытаюсь сделать быструю анимацию в CSS, и мне трудно это сделать. Цель состоит в том, чтобы сдвинуть изображение влево, когда я наводил на него курсор. Где я иду не так? Я получаю «Извините, ключевое слово at-rule @ -webkit-keyframes не реализовано». на 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

добавить позицию в класс 'thumbimage' или изменить' left: -700px' в 'margin-left' –

Кажется, что в' 0%: {left: -700px;} 'находится опечатка. '' 'Там не требуется. – Harry

Здесь я сделал простой пример, пожалуйста, 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

Отъезд JSFiddle - http://jsfiddle.net/d0xoLnua/3/ –

Спасибо за помощь! – user1294476

Ключевые кадры, не создающие анимационный эффект

ответ

Смежные вопросы