css3 animation, change property after animation starts? - html

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.

Answer 1

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

Answer 2

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/

Answer 3

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