关键帧不产生任何动画效果

Question

I am trying to do a quick animation in CSS an I am having difficulty doing it. 我正在尝试在CSS中制作快速动画，但我很难做到。 The objective is to slide the image to the left when I hover on it. 目的是将鼠标悬停在图像上时将图像向左滑动。 Where am I going wrong? 我要去哪里错了？ I get "Sorry, the at-rule @-webkit-keyframes is not implemented." 我得到“对不起，规则@ -webkit-keyframes尚未实现。” on validator.org here is the CSS and HTML code. 在validator.org上的是CSS和HTML代码。

CSS: 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: 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>

Answer 1

Here i have made simple example please check out and make change as per your requirement: 在这里，我做了一个简单的示例，请按照您的要求签出并进行更改：

Check JSFiddle 检查JSFiddle

CSS: 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;
}

关键帧不产生任何动画效果

问题描述

1 个解决方案

解决方案1
0 2014-10-10 07:14:57

关键帧不产生任何动画效果

问题描述

1 个解决方案

解决方案1 0 2014-10-10 07:14:57

解决方案1
0 2014-10-10 07:14:57