[CSS] 애니메이션 관련 스타일

애니메이션

• 속성을 점차적으로 변화시켜 움직이는 효과를 내는 기법
• 트랜지션과 비교했을 때 시작스타일과 종료스타일을 부드럽게 이어주는 기능을 하는것은 같음
• 단 애니메이션은 중간에 원하는 위치에 @keyframes를 이용하여 중간스타일도 지정 가능

@keyframes

• 애니메이션 시작지점과 종료지점의 스타일을 정하고 keyframes의 이름 지정
• 시작지점과 종료지점 두개만 설정할 경우 from{ }to{ }로 설정하면 되고 중간에 하고싶은 작업이 있다면 %로 구분하여 지정

 @keyframes 키프레임명{
    선택자 {스타일;}
}

• 시작지점과 종료지점 두개만 설정할 경우

.anitest1:checked+div{
            width:200px;
            animation-name:ani; /* 애니메이션명 지정 */
            animation-duration:2s; /* 지속시간 */
            animation-direction:alternate; /* 진행방향 (alternate : 번갈아가며)*/ 
            animation-iteration-count: infinite; /* 무한반복 */
 }

@keyframes ani{
            from{
                background-color: green;
                border: 1px solid black;
            }
            to{
                background-color: yellow;
                border-radius: 50%;
                transform: rotate(720deg);
                border:3px solid red;
            }
        }

• 중간에 하고싶은 작업이 있을 때

.check-anitest2:checked+div{
            animation : ani2 5s infinite alternate; /* 축약 버젼 */
        }

@keyframes ani2{
            0%{
                background-color:green;
                border:3px solid black;
            }
            30%{
                transform:translate(100px, 100px);
            }
            50%{
                background-color: pink;
                transform: scale(1.5);
                border-color: yellow;
            }
            100%{
                background-color: blue;
                transform: rotate(360deg);
                border-color: red;
            }
        }

.