我正在尝试用 CSS 制作一个快速动画，但我很难做到。目标是当我将鼠标悬停在图像上时将图像向左滑动。我哪里错了？我收到“抱歉，@-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>
最佳答案
这里我做了一个简单的例子，请检查并根据您的要求进行更改:
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;
}
关于css - 关键帧不产生任何动画效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26293536/