CSS Animation break transform - css

Question

I have a little problem with my CSS file. I try to make an icon that scale to infinite (works), and when I click on icon, an animation rotate the parent to 90deg and the icon rotate to 45deg (works). But, if I combine the 2 behavior, the rotate of icon break. I want rotate the icon of 45deg, and keep the animation.
A demo example: https://codepen.io/KevinPy/pen/ooEbKY?editors=1100
In my demo, the first occurence works with the rotate to 45deg. The second occurence add the animation (via class), but the rotate is break.
Thank you for your answers.
HTML
<div id="first"><span>+</span></div>
<div id="second"><span class="anim">+</span></div>
SCSS
div {
margin: 25px;
display: inline-block;
position: relative;
background-color: blue;
width: 80px;
height: 80px;
&::before {
position: absolute;
top: 20px;
left: -20px;
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
&.open {
transition: .2s transform linear;
transform: rotate(90deg);
span {
transition: .2s transform linear;
transform: rotate(-45deg);
}
}
&.close {
transition: .2s transform linear;
transform: rotate(0deg);
span {
transition: .2s transform linear;
transform: rotate(0deg);
}
}
}
span {
position: absolute;
top: 5px;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 60px;
}
.anim {
animation: keyAnim 3.4s linear infinite;
transform-origin: 50%;
}
#keyframes keyAnim {
0%, 100% {
transform: scale(1);
}
35%, 65% {
transform: scale(1.2);
}
50% {
transform: scale(1.5);
}
}

Answer 1

Your animation overrides the transform attribute. You could add a surrounding element:
var first = document.querySelector('#first');
first.onclick = function(event) {
if (first.classList.contains('open')) {
first.classList.remove('open');
first.classList.add('close');
} else {
first.classList.add('open');
first.classList.remove('close');
}
};
var second = document.querySelector('#second');
second.onclick = function(event) {
if (second.classList.contains('open')) {
second.classList.remove('open');
second.classList.add('close');
} else {
second.classList.add('open');
second.classList.remove('close');
}
};
div {
margin: 25px;
display: inline-block;
position: relative;
background-color: blue;
width: 80px;
height: 80px;
}
div::before {
position: absolute;
top: 20px;
left: -20px;
content: '';
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid blue;
}
div.open {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
div.open .anim_wrap {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
div.close {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
div.close .anim_wrap {
-webkit-transition: .2s transform linear;
transition: .2s transform linear;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
span {
position: absolute;
top: 5px;
bottom: 0;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 60px;
}
.anim {
-webkit-animation: keyAnim 3.4s linear infinite;
animation: keyAnim 3.4s linear infinite;
-webkit-transform-origin: 50%;
transform-origin: 50%;
}
#-webkit-keyframes keyAnim {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
35%, 65% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
#keyframes keyAnim {
0%, 100% {
-webkit-transform: scale(1);
transform: scale(1);
}
35%, 65% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
50% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
}
<div id="first"><span class="anim_wrap">+</span></div>
<div id="second"><span class="anim_wrap"><span class="anim">+</span></span></div>