Question

我遇到了一个我想解决的CSS问题，此时我需要你的帮助。

我有一个@keyframes动画，可以更改隐藏了溢出的类的width。动画有9帧，此时它正在完美运作。

//工作代码

  h1.imgholder {                     // This is the object that will animate.
  overflow: hidden;
  height: 90px;
  width: 415px;
  margin-left: 46%;
  -webkit-animation-name: example;   // animation name
  -webkit-animation-duration: 3.5s;  //animation duration
  animation-name: example;           // animation name
  animation-duration: 3.5s;          //animation duration
}

.img {
  float: left;
}


@-webkit-keyframes example {
  0% {
    width: 85px;
    -webkit-animation-timing-function: linear;
  }
  24.51% {
    width: 85px;
    -webkit-animation-timing-function: linear;
  }
  25% {
    width: 195px;
    -webkit-animation-timing-function: linear;
  }
  49.51% {
    width: 195px;
    -webkit-animation-timing-function: linear;
  }
  50% {
    width: 295px;
    -webkit-animation-timing-function: linear;
  }
  74.51% {
    width: 295px;
    -webkit-animation-timing-function: linear;
  }
  75% {
    width: 322px;
    -webkit-animation-timing-function: linear;
  }
  99.51% {
    width: 322px;
    -webkit-animation-timing-function: linear;
  }
  100% {
    width: 415px;
    -webkit-animation-timing-function: linear;
  }
}

现在我想要的是在某些帧中添加另一个动画属性，如border-right: solid #000;

类似于第1,3,5,7,9 =无边框，第2,4,6,8 = border-right: solid #000;

//这里的代码例如“试过这个，没用”

    @-webkit-keyframes example {
  0% {
    width: 85px;
    -webkit-animation-timing-function: linear;
  }
  24.51% {
    width: 85px;
    border-right: solid #000;                         //show border
    -webkit-animation-timing-function: linear;
  }
  25% {
    width: 195px;
    -webkit-animation-timing-function: linear;
  }
  49.51% {
    width: 195px;
    border-right: solid #000;                        //show border
    -webkit-animation-timing-function: linear;
  }
  50% {
    width: 295px;
    -webkit-animation-timing-function: linear;
  }
  74.51% {
    width: 295px;
    border-right: solid #000;                        //show border
    -webkit-animation-timing-function: linear;
  }
  75% {
    width: 322px;
    -webkit-animation-timing-function: linear;
  }
  99.51% {
    width: 322px;
    border-right: solid #000;                        //show border
    -webkit-animation-timing-function: linear;
  }
  100% {
    width: 415px;
    -webkit-animation-timing-function: linear;
  }
}

我做错了什么？如何使这个类在特定帧上显示边框，并在其他帧上删除或“隐藏”它们。

感谢您的帮助，感谢您的时间，感谢抱歉我的英语不好：p。

Answer 1

我无法弄清楚为什么它以这种方式工作，但动画似乎只有在父元素上设置border-right时才能正常工作。正如您在下面的代码片段中看到的，一旦完成，其余代码就可以正常工作。

此外，根据您的声明在其他框架上删除或“隐藏”，您可能需要考虑在其他框架中添加border-right: none，因为一旦将属性添加到一个框架中框架除非被移除否则不会消失。我已在代码段中添加了两个版本，以便显示差异。

h1.imgholder {
  overflow: hidden;
  height: 90px;
  width: 415px;
  -webkit-animation-name: example;
  -webkit-animation-duration: 3.5s;
  -webkit-animation-timing-function: linear;
  animation-name: example;
  animation-duration: 3.5s;
  animation-timing-function: linear;
  border-right: 1px solid transparent;
}
.img {
  float: left;
}
@-webkit-keyframes example {
  0% {
    width: 85px;
  }
  24.51% {
    width: 85px;
    border-right: 1px solid #000;
  }
  25% {
    width: 195px;
  }
  49.51% {
    width: 195px;
    border-right: 1px solid #000;
  }
  50% {
    width: 295px;
  }
  74.51% {
    width: 295px;
    border-right: 1px solid #000;
  }
  75% {
    width: 322px;
  }
  99.51% {
    width: 322px;
    border-right: 1px solid #000;
  }
  100% {
    width: 415px;
  }
}


/* Just for demo */

h1.imgholder#two{
  -webkit-animation-name: example2;
  -webkit-animation-duration: 3.5s;
  -webkit-animation-timing-function: linear;
  animation-name: example2;
  animation-duration: 3.5s;
  animation-timing-function: linear;
  border-right: 1px solid transparent;
}
@-webkit-keyframes example2 {
  0% {
    width: 85px;
    border-right: none;
  }
  24.51% {
    width: 85px;
    border-right: 1px solid #000;
  }
  25% {
    width: 195px;
    border-right: none;
  }
  49.51% {
    width: 195px;
    border-right: 1px solid #000;
  }
  50% {
    width: 295px;
    border-right: none;
  }
  74.51% {
    width: 295px;
    border-right: 1px solid #000;
  }
  75% {
    width: 322px;
    border-right: none;
  }
  99.51% {
    width: 322px;
    border-right: 1px solid #000;
  }
  100% {
    width: 415px;
    border-right: none;
  }
}

<h1 class="imgholder">
    <img src="http://lorempixel.com/100/100" alt="" class='img'>
</h1>

<!-- Just for demo -->
<h1 class="imgholder" id ='two'>
    <img src="http://lorempixel.com/100/100" alt="" class='img'>
</h1>

@ -webkit-keyframes动画边框

1 个答案: