두가지 이미지 번갈아가며 나타내기 css

두가지 이미지 번갈아가며 나타내기 css

 

See the Pen image change animation by hyunho (@momalcy) on CodePen.

 

 

 

[참고] css animation 옵션 https://noanomal.tistory.com/179

animation-name	애니메이션에 사용할 키프레임을 지정합니다. 키프레임은 애니메이션의 시작과 끝 지점을 정의하는데 사용됩니다.
animation-duration	애니메이션의 지속 시간을 지정합니다. 지정된 시간 동안 애니메이션이 실행됩니다.
animation-timing-function	애니메이션의 실행 시간을 조절하는 함수를 지정합니다. 지정된 함수에 따라 애니메이션이 가속, 감속, 등속 등으로 실행됩니다.
animation-delay	애니메이션이 시작하기 전까지의 대기 시간을 지정합니다. 이 값을 사용하여 애니메이션 실행 시점을 조절할 수 있습니다.
animation-iteration-count	애니메이션의 반복 횟수를 지정합니다. 이 값을 사용하여 애니메이션의 반복 횟수를 설정할 수 있습니다.
animation-direction	애니메이션의 실행 방향을 지정합니다. 정방향, 역방향 또는 번갈아 가며 실행하는 방향을 설정할 수 있습니다.
animation-fill-mode	애니메이션이 실행되기 전과 후의 상태를 지정합니다. 이 값을 사용하여 애니메이션 실행 전과 후의 상태를 설정할 수 있습니다.
animation-play-state	애니메이션의 실행 상태를 지정합니다. 이 값을 사용하여 애니메이션이 일시 중지되거나 다시 시작되는 등의 상태를 설정할 수 있습니다.