css3 animation, change property after animation starts?

Question

please see below:

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


0% { height:200px;     }

50% {opacity:1}

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


}

I would like to start fading the object away only 50% thorugh the animation. not at the beginning. This currently doesn't do any opacity animation.

score 2 · Answer 1 · edited May 23 '17 at 11:56

Not getting your question quiet well but I assume you want to delay the start of your animation, if it's that so.. than you can use animation-delay property... This will help you in delay your animation by few seconds

Demo (Modified demo of my answer 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; }
}

As commented by jCuber, if you want to start animation at 50% than try this

Demo

I believe he wants the opacity to start changing only after 50% through the animation — cbr, Nov 28 '13 at 05:59
@Mr.Alien right that works. but what happens if you have different properties in the mix, not just opacity. e.g. http://jsfiddle.net/umz8t/291/ — dgamma3, Nov 28 '13 at 06:07
@dgamma3 I was using `span` so as its `inline` element it wont take `width` so here you go http://jsfiddle.net/umz8t/294/ — Mr. Alien, Nov 28 '13 at 06:26

score 1 · Accepted Answer · answered Nov 28 '13 at 06:23

1

try this i made some changes in your fiddle it's work and also link of new fiddle

  <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/

answered Nov 28 '13 at 06:23

jignesh kheni

1,282
1
9
22

1

2 upvotes and a tick? what was wrong with my answer? also, this is just a copy of my answer.. – Mr. Alien Nov 28 '13 at 06:26
@Mr.Alien your answer is also right but not as dgamma3 want he like add height property with opacity. – jignesh kheni Nov 28 '13 at 06:29

score 0 · Answer 3 · answered Nov 28 '13 at 06:18

it looks like you just made a simple mistake the last line should read 100% not 50%. It could actually read anything between 51% to 100%. You also were missing a semi-colon, added it in.

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


0% { height:200px; }

50% {opacity:1; }

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


}

css3 animation, change property after animation starts?

3 Answers3