Question

我试图让我的图片从left (-700px)移动到中心位置(0px)时遇到一些问题。我不能100％确定我在这里做错了什么，因为transition本身并没有起作用。我必须保持HTML的原始结构（如果可能）。我在背景颜色上应用了不同的动画，这似乎正在起作用，所以我认为这可能是由于边距或类似的东西。我对CSS动画相当新，我知道这可以通过jQuery更有效地完成（相信我）。如果有人可以提供任何意见，请告诉我或如果您需要更多信息，请告诉我们！

这是HTML：

<!DOCTYPE html>
<html>
 <head>
    <meta charset="UTF-8">
    <title>CS 350 - Lab #5</title>
    <link rel="stylesheet" href="./css/style.css" type="text/css">
 </head>
 <body>
      <h1 id="title">Image Gallery</h1>
      <div id="mygallery">
          <ul id="full-image">
              <li id="desert">
                <img src="./images/desert.jpg" alt="desert"/>
                <p><span>Desert</span></p>
              </li>
              <li id="koala">
                <img src="./images/koala.jpg" alt="koala">
                <p><span>Koala</span></p>
              </li>
              <li id="lighthouse">
                <img src="./images/lighthouse.jpg" alt="lighthouse">
                <p><span>Lighthouse</span></p>
              </li>
              <li id="penguins">
                <img src="./images/penguins.jpeg" alt="penguins">
                <p><span>Penguins</span></p>
             </li>
          </ul>
          <ul id="thumb-image">
              <li>
                <a href="#desert">
                  <img src="./images/desert.jpg" alt="desert">
                </a>
              </li>
              <li>
                <a href="#koala">
                  <img src="./images/koala.jpg" alt="koala">
                </a>
              </li>
              <li>
                <a href="#lighthouse">
                  <img src="./images/lighthouse.jpg" alt="lighthouse">
                </a>
              </li>
              <li>
                <a href="#penguins">
                 <img src="./images/penguins.jpeg" alt="penguins">
                </a>
              </li>
          </ul>
      </div>
  </body>
</html>

CSS：

body {
    background-color: #d9d6cb;
}

#title {
    font-family: Agency FB;
    text-shadow: 2px 2px #F1F1F1;
    text-align: center;
}

#mygallery {
    width: 580px;
    height: 480px;
    margin: auto;
    padding: 20px;
    background-color: #000000;
}

#full-image {
    list-style: none;
    width: 580px;
    height: 400px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    position: relative;
}

#full-image img {
    width: 580px;
}

:target {
    animation: slideImage 2s;
    -webkit-animation: slideImage 2s;
    -moz-animation: slideImage 2s;
}

#thumb-image {
    list-style: none;
    overflow: auto;
}

#thumb-image img {
    width: 50px;
    height: 50px;
    float: right;
    margin-left: 5px;
    border: 1px solid #ffffff;
    opacity: 0.5;
}

#thumb-image img:hover {
    opacity: 1;
}

#thumb-image li {
    position: relative;
}

@-webkit-keyframes slideImage {
    0%  {left:-700px;}
    100% {left:0px;}
}

@-moz-keyframes slideImage {
    0%  {left:-700px;}
    100% {left:0px;}
}

@keyframes slideImage {
    0%  {left:-700px;}
    100% {left:0px;}
}

再一次，任何事情都有帮助！

Answer 1

如果您想操纵position: absolute;属性（就像在关键帧中一样），您应该将:target提供给left。以下是工作示例：

body {
    background-color: #d9d6cb;
}

#title {
    font-family: Agency FB;
    text-shadow: 2px 2px #F1F1F1;
    text-align: center;
}

#mygallery {
    width: 580px;
    height: 480px;
    margin: auto;
    padding: 20px;
    background-color: #000000;
}

#full-image {
    list-style: none;
    width: 580px;
    height: 400px;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    position: relative;
}

#full-image img {
    width: 580px;
}

:target {
    position: absolute;
    animation: slideImage 2s;
    -webkit-animation: slideImage 2s;
    -moz-animation: slideImage 2s;
}

#thumb-image {
    list-style: none;
    overflow: auto;
}

#thumb-image img {
    width: 50px;
    height: 50px;
    float: right;
    margin-left: 5px;
    border: 1px solid #ffffff;
    opacity: 0.5;
}

#thumb-image img:hover {
    opacity: 1;
}

#thumb-image li {
    position: relative;
}

@-webkit-keyframes slideImage {
    0%  {left:-700px;}
    100% {left:0px;}
}

@-moz-keyframes slideImage {
    0%  {left:-700px;}
    100% {left:0px;}
}

@keyframes slideImage {
    0%  {left:-700px;}
    100% {left:0px;}
}

<body>
    <h1 id="title">Image Gallery</h1>
    <div id="mygallery">
        <ul id="full-image">
            <li id="desert">
              <img src="http://www.imgworlds.com/wp-content/themes/IMG/img/phase3/welcome/trex.png" alt="desert"/>
              <p><span>Desert</span></p>
            </li>
            <li id="koala">
              <img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="koala">
              <p><span>Koala</span></p>
            </li>
            <li id="lighthouse">
              <img src="http://www.imgworlds.com/wp-content/uploads/2015/12/18-CONTACTUS-HEADER.jpg" alt="lighthouse">
              <p><span>Lighthouse</span></p>
            </li>
            <li id="penguins">
              <img src="https://pbs.twimg.com/profile_images/378800000017423279/1a6d6f295da9f97bb576ff486ed81389_400x400.png" alt="penguins">
              <p><span>Penguins</span></p>
           </li>
        </ul>
        <ul id="thumb-image">
            <li>
              <a href="#desert">
                <img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="desert">
              </a>
            </li>
            <li>
              <a href="#koala">
                <img src="http://www.imgworlds.com/wp-content/themes/IMG/img/phase3/welcome/trex.png" alt="koala">
              </a>
            </li>
            <li>
              <a href="#lighthouse">
                <img src="http://www.apicius.es/wp-content/uploads/2012/07/IMG-20120714-009211.jpg" alt="lighthouse">
              </a>
            </li>
            <li>
              <a href="#penguins">
               <img src="http://www.imgworlds.com/wp-content/uploads/2015/12/18-CONTACTUS-HEADER.jpg" alt="penguins">
              </a>
            </li>
        </ul>
    </div>
</body>

Answer 2

使用！important来覆盖样式。这可能有用

Answer 3

好吧，如果问题出现在边缘，请试试这个：

div {
  -ms-transform: translate(50px, 100px); /* IE 9 */
  -webkit-transform: translate(50px, 100px); /* Safari */
  transform: translate(50px, 100px);
}

其中translate（）函数的第一个参数是x偏移量，第二个参数是y偏移量。如果这不起作用，那么你至少知道边距不是问题^^

CSS3从左到右的过渡不起作用

3 个答案: