Why is my CSS3 animation not working? - css

Question

I have the following CSS3 animation I want to do in chrome: (fadeIn, and change text color). I have a div element with class "divvy" and contains the text "Hello World". I don't know whyMy CSS is:
.fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.3s;
-moz-animation-duration:0.3s;
animation-duration:0.3s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#-webkit-keyframes example {
from {color: black;}
to {color: yellow;}
}
#keyframes example {
from {color: black;}
to {color: yellow;}
}
.divvy {
color: black;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 6s;
}
HTML is:
<div class="divvy fade-in">Hello World</div>
The inclusion of webkit-animation-name also appears to make the text disappear for some reason.

Answer 1

Your code looks good to me. You can run the code below to see it working:
fade-in {
opacity:0;
-webkit-animation:fadeIn ease-in 1;
-moz-animation:fadeIn ease-in 1;
animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.3s;
-moz-animation-duration:0.3s;
animation-duration:0.3s;
-webkit-animation-delay: 0.5s;
-moz-animation-delay: 0.5s;
animation-delay: 0.5s;
}
#-webkit-keyframes example {
from {color: black; opacity:0;}
to {color: yellow; opacity:1;}
}
#keyframes example {
from {color: black; opacity:0;}
to {color: yellow; opacity:1;}
}
.divvy {
color: black;
-webkit-animation-delay: 1s;
-moz-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation-name: example;
-webkit-animation-duration: 4s;
animation-name: example;
animation-duration: 6s;
}
<div class="divvy fade-in">Hello World</div>

Answer 2

You could accomplish similar effects using the CSS3 transition property and a bit of JS (I used jQuery):
$(document).ready(function() {
setTimeout(function() {
$(".divvy").first().removeClass("fade-in");
}, 1000);
});
.divvy {
opacity: 1;
transition: opacity 4s;
}
.fade-in {
opacity: 0 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="divvy fade-in">Hello, World</div>