Html css3动画，动画开始后更改属性？

请参阅下文：

    @-webkit-keyframes myfirst /* Safari and Chrome */
{


0% { height:200px;     }

50% {opacity:1}

50% {height:300px; opacity: 0; }


}

---

我想开始淡入淡出对象只有50%的动画。不是一开始。这当前不执行任何不透明度动画

你的问题没有得到很好的解决，但如果是这样的话，我想你想推迟动画的开始。。您可以使用

动画延迟

属性。。。这将帮助您将动画延迟几秒钟

（修改我的答案演示）

---

如所述，如果您想在

50%

启动动画，请尝试以下操作

---

看起来你只是犯了一个简单的错误，最后一行应该是100%，而不是50%。它实际上可以读取51%到100%之间的任何内容。您还缺少一个分号，在中添加了它

   @-webkit-keyframes myfirst /* Safari and Chrome */
{


0% { height:200px; }

50% {opacity:1; }

100% {height:300px; opacity: 0; }


}

---

试试这个，我在你们的小提琴上做了一些改变，它的工作和新小提琴的链接

  <div class="blink_me"> Blink</div>

  .blink_me {
     animation-name: blinker;
     animation-duration: 5s;
     animation-iteration-count: infinite;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    background:#ff0000;
    border:1px solid #00ff00;
 }


 @-webkit-keyframes blinker {
   0% {width:20px; opacity: 0;}  
   50% {width:20px; opacity: 1; }
   100% {width:50px; opacity: 0; }
 }

闪烁
.眨眨眼{
动画名称：闪烁；
动画持续时间：5s；
动画迭代次数：无限；
-webkit动画名称：blinker；
-webkit动画持续时间：5s；
-webkit动画迭代计数：无限；
背景：#ff0000；
边框：1px实心#00ff00；
}
@-webkit关键帧闪烁器{
0%{宽度：20px；不透明度：0；}
50%{宽度：20px；不透明度：1；}
100%{宽度：50px；不透明度：0；}
}

---

我相信他希望透明度只有在通过测试的50%后才能开始改变animation@Mr.Alien对，这很有效。但是如果混合中有不同的属性，而不仅仅是不透明度，会发生什么呢。e、 g.@dgamma3我使用了

span

作为

inline

元素，它不会占用

width

，所以这里是2票和一个勾号？我的答案怎么了？此外，这只是我的答案的副本。…@Mr.Alien您的答案也是正确的，但不是dgamma3想要的，他喜欢添加高度属性和不透明度。

  <div class="blink_me"> Blink</div>

  .blink_me {
     animation-name: blinker;
     animation-duration: 5s;
     animation-iteration-count: infinite;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 5s;
    -webkit-animation-iteration-count: infinite;
    background:#ff0000;
    border:1px solid #00ff00;
 }


 @-webkit-keyframes blinker {
   0% {width:20px; opacity: 0;}  
   50% {width:20px; opacity: 1; }
   100% {width:50px; opacity: 0; }
 }