What im trying to do is make a global class

```
.animate {
    -webkit-transition:0.2s;
    -moz-transition:0.2s;
    -o-transition:0.2s;
    transition:0.2s;
}

```

and apply it as 

```
<div class="element animate">
<div class="child"></div>
</div>

```

however, whenever I try

```
.element:hover .child{
    background:#000;
}

```

it doesnt apply the transition. Is there any way to do this? or do I just have to apply .animate to every child element?

Also, about what Im trying to do, is it practical?

Thanks!