CSS의 애니메이션 기능을 이용해 사진과 글이 양쪽 끝에서 가운데로 모이게끔 함
이미지의 크기를 300px로 지정하고
@keyframes규칙을 사용하기 위해 위 애니메이션의 이름을 image_ani로 지정하고,
animation-duration 을 통해 중간까지 이동하는 데 까지 걸리는 시간을 2초로 지정,
animation-fill-mode로 애니메이션이 종료될때 이미지가 어디에 고정되어 있을지 설정
(forwards는 이미지가 이동한곳에 멈춰주게함)
margin-left:0 (페이지의 맨 왼쪽) 부터 margin-left:27% (페이지의 맨 왼쪽에서부터 27% 떨어진곳) 까지 이동하게 함
이번엔 margin-left:75%(왼쪽에서 75% 떨어진곳) 에서 margin_left:50%(왼쪽에서 50% 떨어진곳) 으로 이동하게함. (오른쪽에서 왼쪽)
아래는 위의 style들을 이용한 html 코드
