CSS 动画中断变换

Question

我的 CSS 文件有点问题。我尝试制作一个缩放到无限的图标（有效），当我点击图标时，动画将父级旋转到 90 度，图标旋转到 45 度（有效）。但是，如果我结合这两种行为，图标的旋转就会中断。我想将图标旋转45度，并保持动画。

演示示例：https://codepen.io/KevinPy/pen/ooEbKY?editors=1100

在我的演示中，第一次出现旋转到 45 度。第二次添加动画（通过类），但旋转中断。

感谢您的回答。

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

您的动画会覆盖transform 属性。您可以添加一个环绕元素：

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>