Material ripple style background animation - css

Question

I have found this fiddle, but the animation works only if I click and hold.
#parent {
height: 200px;
width: 400px;
background-color: lightgray;
}
#circle {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 0 0;
height: 200px;
width: 400px;
transition: .3s ease-in;
}
#parent:active #circle {
background-size: 600px 600px;
}
<div id="parent">
<div id="circle"></div>
</div>
Would it be possible to make the animation to load when the page loads?
Just want some background load in animation similarly to Android Lollipop ripple / Firefox OS for TV.

Answer 1

You can use CSS3 animation for the transition to start automatically.
Learn more about animation here:
https://css-tricks.com/almanac/properties/a/animation/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations
http://www.w3schools.com/css/css3_animations.asp
Updated fiddle: Fiddle
Snippet:
#parent {
height: 200px;
width: 400px;
background-color: lightgray;
}
#circle {
background-image: url("http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg");
background-position: center center;
background-repeat: no-repeat;
background-size: 0 0;
height: 200px;
width: 400px;
/*transition: .3s ease-in;*/
animation: example 1s ease-in infinite;
}
#keyframes example {
0% {
background-size: 0px 0px;
}
50% {
background-size: 600px 600px;
}
100% {
background-size: 0px 0px;
}
}
<div id="parent">
<div id="circle"></div>
</div>