CSS 애니메이션이있는 요소에서 중첩 된 CSS 전환을 사용하는 데 문제가 있습니다.

Question

전적으로 전이를 사용하거나 애니메이션 만 사용하면 모든 것을 사용할 수 있지만 혼합으로 작업하는 방법을 찾지 못하는 것 같습니다.

기본적으로 페이드 인하고자하는 하나의 외부 요소가 있고, 페이드가 완료된 후 내부 요소가 삽입됩니다.

내 실제 사례가 복잡하여 내가 무슨 일을하는지 보여주는 바이올린을 만들었습니다.

여기서 맨 아래 바를 맨 위와 비슷하게 작동 시키려면 어떻게해야합니까? (scaleX의 차이는 제외). 문제는 하단의 내부 파란색 막대가 맨 위와 같이 열려있는 애니메이션 대신 전체 직선으로 표시된다는 것입니다. 당신은 animate 대신 animation을 사용하고

<div class="outer"> 
    <div class="inner"> 
    </div> 
</div> 

<p></p> 

<div class="outer2"> 
    <div class="inner2"> 
    </div> 
</div> 

.outer { 
    width: 300px; 
    height: 100px; 
    background-color: red; 
    opacity: 0.1; 
} 
.outer .inner { 
    height: 100px; 
    width: 0; 
    background-color: blue; 
} 
.outer:hover { 
    opacity: 1; 
    transition: opacity 1s; 
} 
.outer:hover .inner { 
    width: 100px; 
    transition: width 1s 0.5s; 
} 

.outer2 { 
    width: 300px; 
    height: 100px; 
    background-color: red; 
    opacity: 0.1; 
} 
.outer2 .inner2 { 
    height: 100px; 
    width: 0; 
    background-color: blue; 
} 
.outer2:hover { 
    opacity: 1; 
    transition: opacity 1s; 
} 
.outer2:hover .inner2 { 
    width: 100px; 
    animate: widen 1s 0.5s forwards; 
} 

@keyframes widen { 
    from { 
     transform: scaleX(0); 
    } 
    to { 
     transform: scaleX(1); 
    } 
} 

Answer 1

이 예를 들어

https://jsfiddle.net/joshuaohana/sqsLc5sd/

은 어느 색깔의 상자를 위로 마우스를 이동. scaleX() 대신 translateX을 사용할 수도 있지만 문제가되지는 않습니다. 또한 .inner2에 대한 규칙에서 애니메이션의 초기 상태를 설정 한 다음 애니메이션을 단순화하고 to 또는 100% 단계 만 지정하십시오. 오타에

.outer { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: red; 
 
    opacity: 0.1; 
 
} 
 
.outer .inner { 
 
    height: 100px; 
 
    width: 0; 
 
    background-color: blue; 
 
} 
 
.outer:hover { 
 
    opacity: 1; 
 
    transition: opacity 1s; 
 
} 
 
.outer:hover .inner { 
 
    width: 100px; 
 
    transition: width 1s 0.5s; 
 
} 
 

 
.outer2 { 
 
    width: 300px; 
 
    height: 100px; 
 
    background-color: red; 
 
    opacity: 0.1; 
 
    transition: opacity 1s; 
 
    overflow: hidden; 
 
} 
 
.inner2 { 
 
    height: 100px; 
 
    transform: translateX(-100%); 
 
    background-color: blue; 
 
    transform-origin: 0; 
 
} 
 
.outer2:hover { 
 
    opacity: 1; 
 
} 
 
.outer2:hover .inner2 { 
 
    width: 100px; 
 
    animation: widen 1s forwards; 
 
    animation-delay: .5s; 
 
} 
 

 
@keyframes widen { 
 
    to { 
 
     transform: translateX(0); 
 
    } 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    </div> 
 
</div> 
 

 
<p></p> 
 

 
<div class="outer2"> 
 
    <div class="inner2"> 
 
    </div> 
 
</div>