transform과 aos를 같이 쓸 때 애니메이션 오류 해결

 

<div>
    <img src="이미지" alt="" data-aos="fade-up" data-aos-delay="500">
</div>

img {transform:translateY(100%); animation:애니메이션명 2.2s infinite linear}

 

문제

 

이미지에 transform 속성과 aos를 모두 선언했더니, 애니메이션이 제대로 동작하지 않음.

 

 

해결

transform 속성과 aos를 따로 넣어주면 해결.

 

transform은 이미지에 선언, aos는 이미지를 담고 있는 부모 박스에 선언

<div data-aos="fade-up" data-aos-delay="500">
    <img src="이미지" alt="">
</div>

img {transform:translateY(100%); animation:애니메이션명 2.2s infinite linear}

 

 

원인

aos에서의 transfrom 값과 애니메이션 설정을 위한 transform 값이 서로 충돌함.