Hi there,
Currently working on a little experiment with CSS3 animation just to get my eye-in a little bit.
I’ve got a basic example of a hover animation changing the size of an element but I was wondering how I go about animating an element within a container when the container is hovered.
Here is my basic example with the “button” div in place for the secondary animation.
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
<style type="text/css">
#container{width:928px;}
@keyframes myfirst
{
from {width: 200px;}
to {width: 300px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */{
from {width: 200px;}
to {width: 300px;}
}
@keyframes button
{
from {top: 10px;}
to {top: 50px;}
}
@keyframes -webkit-keyframes button
{
from {top: 10px;}
to {top: 50px;}
}
div.animated{animation: myfirstout 1s; -webkit-animation: myfirstout 0.5s; /* Safari and Chrome */ animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}
div.animated:hover {background:red; animation: myfirstin 1s; -webkit-animation: myfirstin 0.5s; /* Safari and Chrome */ animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}
</style>
</head>
<body>
<div id="container">
<div class="animated"><div class="button"></div></div>
</div>
</body>
</html>
Then, I had a go at duplicating the keyframes for button but when I hover over the container nothing happens to the button. What did I break?! 
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
<style type="text/css">
#container{width:928px;}
@keyframes myfirst
{
from {width: 200px;}
to {width: 300px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */{
from {width: 200px;}
to {width: 300px;}
}
@keyframes button
{
from {top: 10px;}
to {top: 30px;}
}
@keyframes -webkit-keyframes button
{
from {top: 10px;}
to {top: 30px;}
}
div.animated{width:200px; height:200px; background:red;}
.button{position:absolute; top:0px; left:0px; width:100px; height:20px; background:blue;}
div.animated:hover {background:red; animation: myfirst 1s; -webkit-animation: myfirst 0.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; /* Safari and Chrome */}
div.animated:hover .button{background:blue; animation: button 1s; -webkit-animation: button 0.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; /* Safari and Chrome */}
</style>
</head>
<body>
<div id="container">
<div class="animated"><div class="button"></div></div>
</div>
</body>
</html>
Cheers,
Shoxt3r
