CSS Basic Animation & Transition & Transform

Animation

①시간별 애니메이션 장면 작성

@keyframes 애니메이션이름 {

    0% { color : blue;}      /* 시작 시. 0% 대신 from을 써도 됨 */

    30% { color : green;}   /* 30% 경과 시까지 */

    100% { color : red;}    /* 끝까지. 100% 대신 to를 써도 됨. */

    }

②애니메이션 스타일 시트 작성

span { animation-name : "bbb";               /* 애니메이션이름 */

    animation-duration : 5s;                 /* 애니메이션 1회 시간은 5초 */

    animation-iteration-count: infinite;    /* 무한 반복. 애니메이션 반복 횟수. 숫자로도 줄 수 있음. */

    }

 

Transition

HTML태그에 적용된 CSS3 프로퍼티 값이 변할 때, 값의 변화를 서서히 진행시켜 애니메이션 효과를 내는 것이며, 1회만 이루어짐. 다만, transition은 수치로 된 것만 조작할 수 있기에 display:none 같은 건 조작이 불가능하다.

span {

  transition: font-size 5s;

}

폰트 크기가 바뀌는 일이 발생하면 5초 동안 전환 효과가 진행되도록

span:hover {

  font-size: 500%;

}

마우스가 글자 위에 올라오면 5초에 걸쳐 현재 크기에서 500% 크기로 전환 진행

 

 

Transform

①변환(transform) 프로퍼티

div {

  transform: rotate(20deg);

}

태그를 시계 방향으로 20도 회전시킨 모양으로 변환

②2차원 변환 함수(3차원 변환도 지원하지만 2차원 변환만 소개)

div {transform: translate(100px, 200px);}   /* 태그를 X-축으로 100px만큼, Y-축으로 200px 만큼 이동 */

div {transform: translateX(50px);}          /* 태그를 X-축으로 50px만큼 이동 */

div {transform: translateY(10px);}             /* 태그를 Y-축으로 10px만큼 이동 */

div {transform: scale(2, 3);}               /* 태그의 폭과 높이를 각각 2, 3배 만큼 조절. w나 h를 0으로 주면 보이지 않게 됨 */

div{transform:scaleX(3);}                   /* 태그의 폭을 3배 만큼 조절 */

div{transform:scaleY(4);}                   /* 태그의 높이를 4배 만큼 조절 */

div{transform:rotate(30deg);}               /* 태그를 30deg 각도 만큼 시계 방향 회전 */

div{transform:skew(45deg, 65deg);}      /* 태그를 X-축과 Y-축을 기준으로 각각 45deg, 65deg 만큼 기울임 변환 */

div{transform:skewX(15deg);}                /* 태그를 X축을 기준으로 15deg 각도만큼 기울임 */

div{transform:skewY(30deg);}                /* 태그를 Y축을 기준으로 30deg 각도만큼 기울임 */

 

③다중 변환

div {

  transform: rotate(20deg) scale(3, 1);

}