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

【问题标题】：css3 animation, change property after animation starts?css3动画，动画开始后更改属性？
【发布时间】：2023-04-08 16:17:01
【问题描述】：

请看下面：

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


0% { height:200px;     }

50% {opacity:1}

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


}

我想在动画中仅将对象淡出 50%。不是一开始。这目前不做任何不透明动画。

【问题讨论】：

标签： html css web-deployment css-animations

【解决方案1】：

没有很好地解决您的问题，但我假设您想延迟动画的开始，如果是这样的话..您可以使用animation-delay 属性...这将帮助您将动画延迟几秒钟

Demo（我的答案的修改演示here）

.blink_me {
    animation-name: blinker;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;

    -moz-animation-delay: 5s;
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

@-moz-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@-webkit-keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

@keyframes blinker {  
    0% { opacity: 1.0; }
    50% { opacity: 0.0; }
    100% { opacity: 1.0; }
}

正如jCuber 所评论的，如果你想在50% 开始动画，那么试试这个

Demo

【讨论】：

我相信他希望不透明度只有在动画达到 50% 后才开始改变
@Mr.Alien 正确的工作。但是如果你在混合中有不同的属性会发生什么，而不仅仅是不透明度。例如jsfiddle.net/umz8t/291
@dgamma3 我使用的是span，所以它的inline 元素不会占用width 所以这里是jsfiddle.net/umz8t/294

【解决方案2】：

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

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

http://jsfiddle.net/umz8t/293/

【讨论】：

2 个赞和一个勾？我的回答有什么问题？另外，这只是我的答案的副本..
@Mr.Alien 您的回答也是正确的，但不像 dgamma3 想要的那样添加不透明度的高度属性。

【解决方案3】：

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

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


0% { height:200px; }

50% {opacity:1; }

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


}

【讨论】：