[CSS] animation CSS

animation CSS

- 애니메이션을 사용하면 요소를 한 스타일에서 다른 스타일로 점진적으로 변경할 수 있다. 

-  CSS 애니메이션을 사용하려면 먼저 애니메이션에 대한 몇가지 키 프레임 keyframes 을 지정해야한다. 

- 키프레임(keyframe)은 특정 시간에 요소의 스타일을 유지한다. 

 

animation 속성 값

animation-name	@keyframes 애니메이션의 이름을 지정합니다.
animation-duration	애니메이션이 한 주기를 완료하는 데 걸리는 시간을 지정합니다.
animation-timing-functich	애니메이션의 속도 곡선을 지정합니다. ex) linear, ease, ease-in ..
animation-delay	애니메이션 시작 지연을 지정합니다.
animation-iteration-count	애니메이션을 재생해야 하는 횟수를 지정합니다.
animation-direction	애니메이션을 앞으로, 뒤로 또는 번갈아 재생해야 하는지 여부를 지정합니다. ex) normal, alternate, reverse... htps://www.w3schools.comicssret/playit asp?filenameeplayess_animation-drection&prevaleaternate
animation	모든 애니메이션 속성을 설정하기 위한 약식 속성

 

animation-direction

normal	기본값. 애니메이션이 정상적으로 재생됩니다(forwards).
reverse	애니메이션이 역방향으로 재생됩니다.(backwards)
alternate	애니메이션이 먼저 앞으로 재생된 다음 뒤로 재생됩니다.
alternate-reverse	애니메이션이 먼저 뒤로 재생된 다음 앞으로 재생됩니다.

 

 

예시 

div {
	width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
    animation: animationName 5s linear 2s infinite alternate; 
}

@keyframes animationNmae {
	0 % { background-color: lightblue; left: 0px; top: 0px;}
    25 % { background-color: lightcoral; left: 150px; top: 0px;}
    50 % { background-color: lightcyan; left: 150px; top: 150px;}
    75 % { background-color: lightgray; left: 0px; top: 150px;}
    100 % { background-color: lightgreen; left: 0px; top: 0px;}
}