CSS 애니메이션 break transform

CSS 파일에 약간의 문제가 있습니다. 무한히 확장 할 수있는 아이콘을 만들려고 노력합니다. 아이콘을 클릭하면 애니메이션이 부모를 90 도로 회전하고 아이콘이 45도 (회전)로 회전합니다. 그러나, 만약 내가 2 행동을 결합하면, 아이콘이 돌아가는 것입니다. 45deg 아이콘을 회전시키고 애니메이션을 유지하고 싶습니다.CSS 애니메이션 break transform

데모 예 : https://codepen.io/KevinPy/pen/ooEbKY?editors=1100 내 데모에서

,를 선두는 45deg를 회전 작동합니다. 두 번째 발생은 클래스를 통해 애니메이션을 추가하지만 회전은 중단됩니다.

답장을 보내 주셔서 감사합니다.

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); 
    } 
}

출처

2017-11-20 Kevin Py

귀하의 애니메이션이 transform 속성을 재정의합니다.

var first = document.querySelector('#first'); 
 

 
first.onclick = function(event) { 
 
\t 
 
\t if (first.classList.contains('open')) { 
 
\t \t first.classList.remove('open'); 
 
\t \t first.classList.add('close'); 
 
\t } else { 
 
\t \t first.classList.add('open'); 
 
\t \t first.classList.remove('close'); 
 
\t } 
 
\t 
 
}; 
 

 
var second = document.querySelector('#second'); 
 

 
second.onclick = function(event) { 
 
\t 
 
\t if (second.classList.contains('open')) { 
 
\t \t second.classList.remove('open'); 
 
\t \t second.classList.add('close'); 
 
\t } else { 
 
\t \t second.classList.add('open'); 
 
\t \t second.classList.remove('close'); 
 
\t } 
 
\t 
 
};

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>

: 당신은 주변의 요소를 추가 할 수 있습니다

출처

2017-11-20 10:36:25 Huelfe

CSS 애니메이션 break transform

답변

관련 문제