앨리스코딩에서의 첫 2주 개인프로젝트 과제를 받았다. 포트폴리오 사이트를 만드는것이었는데, 웹사이트 테마를 어떻게 할까 고민을 굉장히 많이했다. 그러던중 핀터레스트에서 어떤 외국가수의 cd사진을 보고 영감을 받아 포트폴리오 테마를 나라는 사람의 플레이스트를 보여주자라는 느낌으로 구현해 보기로 했다. css를 안한지 좀 꽤 되서 구글링하면서 기능을 개선해 갔고, css animation은 동시에 두번 작동이 안되는것을 알게 되었다.
cd 회전을 구현하면서 잊고 있었던 css animation 지식을 다시 정리하고자 한다.
animation :rotation 1500ms linear infinite alternate;
@keyframes rotate_image {
100% {
transform: rotate(360deg);
}
}animation :name duration timingfunction animation-iteration-count animation-direction
animation-direction 속성값
normal
기본값. 애니메이션 정방향 재생
reverse
애니메이션 역방향 재생.
alternate
애니메이션 정방향 재생 후 역방향 재생.
alternate-reverse
애니메이션 역방향 재생 후 정방향 재생.
initial
이 속성의 기본값으로 설정.
inherit
부모 요소 속성을 상속.
timingfunction 속성값
ease - cubic-bezier(0.25, 0.1, 0.25, 1)와 같다. 처음과 끝을 부드럽게 (기본값)
linear - cubic-bezier(0, 0, 1, 1)와 같다. 등속운동
ease-in - cubic-bezier(0.42, 0, 1, 1)와 같다. 처음을 느리게
ease-out - cubic-bezier(0, 0, 0.58, 1)와 같다. 마지막을 느리게
ease-in-out - cubic-bezier(0.42, 0, 0.58, 1)와 같다. 처음과 마지막을 느리게 준다.
step-start - steps(1,start)와 같다. 시작하는 지점에 스텝을 끊어준다.
step-end - steps(1,end)와 같다. 끝나는 시점에 스텝을 끊어준다.
