@-webkit-keyframes 动画边框

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 时才能正常工作。正如您在下面的 sn-p 中看到的，一旦完成，您的其余代码就可以正常工作了。

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

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>