Как сделать анимацию на css с вложенными элементами?

Question

[Виталий Киренков]

Есть вложенность

<div class="animation">
    <a href="#">
        <div class="text-muted">asdsad</div>
        <div class="someclass">aasdasdsad</div>
    </a>
</div>

.animation {
  -webkit-animation: flash-bg 1s ease-out;
       -o-animation: flash-bg 1s ease-out;
          animation: flash-bg 1s ease-out;
}

@-webkit-keyframes flash-bg {
    0% { background-color: none;}
    50% { background-color: @color-green-success;}
    100% { background-color: none;}
}

@-moz-keyframes flash-bg {
    0% { background-color: none;}
    50% { background-color: @color-green-success;}
    100% { background-color: none;}
}

@-ms-keyframes flash-bg {
    0% { background-color: none;}
    50% { background-color: @color-green-success;}
    100% { background-color: none;}
}

Анимацию вешаю на .animation. Как сделать, чтобы у неё включался фон, а у вложенной А, допустим, менялся цвет шрифта?

Comments

[romy4]

вопрос требует представления кода ибо решений уйма

[Виталий Киренков]

romy4: Внес дополнение в вопрос.

[Виталий Киренков]

SelenIT2: это был просто копипаст. У меня это вообще на миксине построено на бутстрапе.
И на отдельных я сделал, но не нравиться портянка такая.

[Александр Леон-Булатов]

А это не задание у Вас, а?

Answer 1

[Сергей Вирченко]

Пиши для "a" анимацию изменения цвета с 1s
.animation a{
animation: change-color 1s ease-out;
}
@keyframes chande-color{
..............
}