@-webkit-keyframes 动画边框

Question

我正在尝试解决 CSS 的问题，此时我需要您的帮助。

我有一个 @keyframes 动画，它改变了 class 的 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;

//这里的代码例如"tried this, didn't work"

    @-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;
  }
}

我做错了什么？我怎样才能使它 class 在特定帧上显示边框，并在其他帧上删除或 "hide" 它们。

感谢您的帮助，感谢您的宝贵时间，抱歉我的英语不好 :p.

Answer 1

我不太明白为什么它会这样工作，但动画似乎只有在父元素上设置 border-right 时才能正常工作。正如您在下面的代码片段中看到的那样，一旦完成，您的其余代码就可以正常工作。

此外，根据您的声明 删除或 "hide" 在其他框架上 ，您可能需要考虑在其他框架中添加 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 动画边框

@-webkit-keyframes animation border

html

css

keyframe

css-animations