Я не могу заставить эту анимацию только CSS работать так, как мне нужно. ⇐ CSS

[Anonymous]

На любую анимацию отдельных элементов морды, которую я хочу, влияет исходная всплывающая анимация собаки. Например, теперь я хочу, чтобы уши собаки плавно двигались вверх/вниз, но вместо этого они отрывались от ее головы.
Как мне настроить анимацию, чтобы этого не происходило?
Я пытался сбросить родительскую анимацию. Я мог бы настроить слои так, чтобы все тело не было сгруппировано, но тогда мне придется применять анимацию popUp к каждому слою индивидуально?

Код: Выделить всё

svg {
width: 25rem;
height: auto;
margin: 1rem;
}

.animation {
display: flex;
justify-content: center;
}

#paws {
animation: paws .4s 1s backwards;
}

@keyframes paws {
0% {
opacity: 0;
}
50% {
transform: translateY(-0.09rem);
}
100% {
opacity: 1;
}
}

#whole-body {
animation: popUp .9s ease-in-out 2s forwards;
}

@keyframes popUp {
80% {
transform: translateY(-1.8rem);
}
100% {
transform: translateY(-1.6rem);
}
}

#head, #tongue {
animation: bobbing 1s infinite;
}

@keyframes bobbing {
50% {
transform: translateY(-1%);
}
}

#ball {
animation: roll 2.5s ease-out 4s both;
}

@keyframes roll {
100% {
transform: translateX(7rem);
}
}

#snout {
animation: breathe 2s ease-in-out 2s infinite forwards;
transform-origin: center;

}

@keyframes breathe {
0% {
transform: scale(0.95);
}
50% {
transform: scale(1);
}
100% {
transform: scale(0.95);
}
}
#left-pupil, #right-pupil {
animation: eye 2s ease-out 4s forwards;
}

@keyframes eye {
33% {
transform: translateX(-1%) translateY(1%);
}

66% {
transform: translateX(1%) translateY(0.5%);
}
}

#left-ear {
animation: leftEarFlap 1s ease-in 2.2s forwards;
transform-origin: 46% 46%;
}

@keyframes leftEarFlap {
50% {
transform: rotate(15deg);
}
}
#right-ear {
animation: rightEarFlap 1s ease-in 2.2s forwards;
transform-origin: 54% 46%;
}

@keyframes rightEarFlap {
50% {
transform: rotate(-15deg);
}
}

Код: Выделить всё

    





.cls-1 {
fill: #3f1300;
}

.cls-2 {
fill: #ff7bac;
}

.cls-3 {
fill: #c46341;
}

.cls-4 {
fill: #fff1e4;
}

.cls-5 {
fill: #ffece4;
}

.cls-6 {
fill: #9d3100;
}

.cls-7 {
fill:  #713000;
}

codepen

Подробнее здесь: https://stackoverflow.com/questions/791 ... need-it-to