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

Posted 2023-03-06

【中文标题】css3动画，动画开始后更改属性？

【英文标题】：css3 animation, change property after animation starts?

【发布时间】：2013-12-14 01:13:04

【问题描述】：

请看下面：

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



0%  height:200px;     

50% opacity:1

50% height:300px; opacity: 0; 

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

【参考方案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;