CSS 动画中断变换

Posted 2023-03-06

【中文标题】CSS 动画中断变换

【英文标题】：CSS Animation break transform

【发布时间】：2018-05-03 12:21:02

【问题描述】：

我的 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);
    

【参考方案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>