변환과 CSS 애니메이션 결합

Question

일부 애니메이션으로 CSS 변환을 수행 할 수 있습니까?

나는 잘 작동이 tarnsform

transform: translate(-10%, 0px); left: 0px; 

잘

스크롤, 슬라이더를 왼쪽에 애니메이션을하지만 1

에 불투명도 0에서 애니메이션 일부 페이드를 추가하고 싶습니다있다

Answer 1

제가 이해한다면 애니메이션에 번역 및 불투명도를 모두 포함 시키려면 다음을 사용하십시오.

div { 
 
    width: 100px; 
 
    height: 100px; 
 
    background: red; 
 
    animation-name: fromleft; 
 
    animation-delay: 0s; 
 
    animation-duration: 0.8s; 
 
    animation-fill-mode: backwards; 
 
    animation-timing-function: ease-out; 
 
} 
 

 
@keyframes fromleft { 
 
    0% { 
 
    transform: translateX(-100px); 
 
    opacity: 0; 
 
    } 
 
    100% { 
 
    transform: translateX(0px); 
 
    opacity: 1; 
 
    } 
 
}

<div> 
 

 
</div>