본문 바로가기

html+CSS+JS/html+CSS

[CSS] 애니메이션 무한반복 (animation, from, to, duration)

반응형

애니메이션 부여 과정

 

1) 애니메이션 속성 부여 (개별 부여)

선택자: {스타일 내용;

     animation-name: 애니메이션 이름 부여;          /* 원하는 선택자에 애니메이션 이름 부여 */

     animation-duration: 숫자(단위:ms/s);          /* 애니메이션 지속되는 시간 */

     animation-iteration-count:;          /* 애니메이션 반복여부. 숫자, infinite(무한반복) 등 */

}

 

선택자:visited {스타일 내용}

적용 스타일값 - font-weight: 글자 두께 / font-shadow: 글자 그림자 (상하,좌우,번짐정도,색상)

 

3. 커서가 올라가있을 때 (Tab키를 누르면 선택이 달라지는 때)

선택자:focus {스타일 내용}

적용 스타일값 - font-weight: 글자 두께 / font-shadow: 글자 그림자 (상하,좌우,번짐정도,색상)

 

4. 마우스로 클릭했을 때

선택자:active {스타일 내용}

적용 스타일값 - font-weight: 글자 두께 / font-shadow: 글자 그림자 (상하,좌우,번짐정도,색상)

 

반응형