CSS 애니메이션, 반응형 웹_1 (9/6)

3장 웹사이트에 생명을 넣어보자

CSS3라는 최신 CSS에 등장하게 된 속성들 : Transform, Transition, Animation

1. Transform

웹사이트의 특정 영역에서 object의 각도를 튼다거나, 크기를 조절하거나 위치를 변경할 때 쓰는 특성

[rotate, scale]

<style>
  .transition {
    transform: rotate(45deg); /* 회전 */
    transform: scale(2, 3);   /* 확대 축소 */
  }
</style>

• rotate(45deg); 입력한 각도만큼 평면적 회전, 음수도 입력 가능
• scale(2, 3); 숫자는 비율을 의미, width를 2배, height를 3배 확대 (축소하고자 하면 0.5배의 0.5 입력 가능)

[skew, translate]

<style>
  .transition {
    transform: skew(10deg, 20deg);        /* 각도 변경 */
    transform: translate(100px, 200px);   /* 위치 변경 */
  }
</style>

• skew(10deg, 20deg); x축 y축을 기준으로 입력한 각도만큼 비틂
• translate(100px, 200px); 선택한 오브젝트의 x축 y축 만큼 좌표 변경

[prefix 접두사]

transform이 CSS3라는 최신 언어이기 때문에 explorer 하위 버전에서는 사용할 수 없음 > 다른 버전의 브라우저에서의 실행을 원할경우

<style>
  .transition {
    -webkit-transform: translate(100px, 200px); /* 크롬, 사파리 */
    -moz-transform: translate(100px, 200px);    /* 파이어폭스 */
    -ms-transform: translate(100px, 200px);     /* 익스플로러 9.0 */
    -o-transform: translate(100px, 200px);      /* 오페라 */
  }
</style>

[실습1] CSS Transform

  <style>
    .transform {
       width: 100px;
       height: 100px;
       background-color: red;
       margin: 200px 0 0 200px;
       transform: rotate(45deg);
       transform: scale(2,3);
       transform: translate(100px,200px);
       transform: skew(10deg, 20deg);
    }
  </style>
  <!-- scale의 기준점은, 기존 박스의 정가운데 -->
  <!-- rotate, skew, translate은 음수를 넣을 수 있음 -->
  <!-- 나중에 작성한 transform속성이 적용되는 것을 알 수 있음 -->

퀴즈) CSS Transform 관련 속성에 대한 설명

<style>
  .elice {
    transform: rotate(45deg);
    transform: scale(2, 3);
  }
</style>

① rotate(45deg)는 45도 만큼 회전한다는 의미로 음수도 입력 가능하다.
② .elice : class 선택자를 의미한다.
③ scale(2,3)은 width를 2배, height를 3배 확대한다는 의미이다.

2. Transition

변화하는 과정을 보여주고자 할 때 사용.

[property, duration]

<style>
  .trasition {
    transition-property: width;
    transition-duration: 2s; /*2초 동안 적용*/
  }
</style>

• property : 효과를 적용하고자 하는 css 속성
• duration : 효과가 나타나는데 걸리는 시간

[timing-function, delay]

<style>
  .trasition {
    transition-timing-function: linear;
    transition-delay: 1s; /*1초 후에 적용*/
  }
</style>

• timing-function : 효과를 속도, linear은 '일정하게'라는 의미
• delay : 특정 조건 하에서 효과 발동, 1s는 '1초 후'라는 의미

[가상선택자 : hover]

<style>
  .trasition: hover { width: 300px; }
</style>

css에서 미리 만들어 놓은 클래스 '마우스를 올렸을 때'라는 조건

[Transition 종합]

<style>
  .trasition {
    transition: width 2s linear 1s;
  }
    /*먼저 나오는 숫자가 duration이고 나중에 나오는 수가 delay*/
    /*숫자가 하나밖에 없으면 그건 duration*/
  .transition:hover { width: 300px; }
    /*transiton:hover 띄어쓰기 없이 써야함.*/
</style>

마우스를 올리면 1초 후에 width 값이 300px로, 2초 동안, 일정 속도로 변하는 애니메이션 효과 발동

[실습2] CSS Transition

  <style>
    .transition {
        width: 100px;
        height: 100px;
        background-color: red;
        transition: width 2s linear 1s;
    }
    .transition:hover {
        width: 300px;
    }
  </style>

3. Animiation

조건에 상관 없이, 어떠한 이벤트를 적용하고자 할때
ex) 웹사이트에 접속하자마자 object가 회전하고자 할 때

[Animation]

• animation-name: changeWidth; 임의로 작성 가능
• iteration-count: 6; 애니메이션 반복 횟수
• direction: 애니메이션 진행 방향
  1) alternate : from > to > from
  2) normal : from > to
  3) reverse : to > from
• keyframes 애니메이션 이름 { } from, to 정해주는 animation의 짝꿍

[실습3] CSS Animation

<style>
  .animation {
    animation-name: changeWidth;
    animation-duration: 3s;
    animation-timing-function: linear;
    animation-delay: 1s;
    animation-iteration-count: 6;
    animation-direction: alternate;
    /* animation: changeWidth 3s linear 1s 6 alternate; */
    /* 위와 같이 한 줄로 쓸 수도 있음*/
  }

  @keyframes changeWidth {
    from { width : 300px; }
    to { width : 600px; }
  }
</style>

4. 애니메이션 응용 Transform & Animation

Transform과 Animation을 결합 할 때 주의사항

[Transform & Animation]

• prefix 작성 가능함
• prefix를 쓰면 keyframes에도 prefix를 작성해야 하고, from, to에도 입력해야 함.

<style>
  .box1 {
    -webkit-animation: rotation 1500ms linear infinite alternate;
    /*1000ms=1s, infinite: 무한 반복 효과*/
  }
  @-webkit-keyfromes rotation {
    from { -webkit-transform: rotate(-10deg); }
    to { -webkit-transform: rotate(10deg); }
  }
</style>

5. 쇼핑몰 페이지에 애니메이션 적용

[hover]

메뉴 영역에 마우스를 올렸을 때, 글자 색 or 배경이 변하는 효과

<style>
  #intro nav ul li a {
    transition: color 1s;
  }
  #intro nav ul li a:hover {
    color: #917f7f;
  }
  #main article.one {
    transition: background-color 1s;
  }
  #main article.one:hover {
    background-color: #8683bd;
  }
  #main article img {
    transition: all 1s; /*이미지 전역으로 효과 적용*/
  }
  #main article img:hover {
    transform: scale(1.1);
  }
</style>