3. 웹사이트에 생동감 부여하기

Transform

- 특정 영역 

 

rotate, scale

- rotate : 회전

- scale : 확대, 축소

<style>
  .transition {
    transform: rotate(45deg); /* 45'회전 */
    transform: scale(2,3);    /* width=2배, height=3배 확대 */
   }
</style>

 

 

skew, translate

- skew : 비틀기

- translate : 좌표 변경

<style>
  .transition {
    transform:skew(10deg, 20deg);     /* x축 10, y축 20' 각도 변경 */ 
    transform:translate(100px,200px); /* x축 100px, y축 200px 좌표 변경 */
  }
</style>

 

 

prefix 접두사

- 다른 버전의 브라우저에서의 실행을 원할 경우   

 

 

---

Transition

- 특정 조건

 

property, duration

- property : 효과 적용할 속성

- duration : 효과 나타나는 시간

<style>
  .transition {
    transition-property: width; /* width에 적용 */
    transition-duration: 2s;    /* 2초 동안 효과 지속 */
  }
</style>

 

 

timing-function, delay

- timeing-function : 효과 속도

- delay : 특정 조건

<style>
  .transition {
    transition-timing-function: linear; /* 일정하게 */
    transition-delay: 1s;
  }
</style>

 

 

hover

- 이미 만들어진 클래스 : 마우스 올렸을 경우

<style>
  .transition hover { width: 300px; }  /* 마우스 올렸을 때 */
</style>

 

 

종합

- 마우스를 올리면(hover) 1초 후(delay)에 width 값이 300px로

   2초 동안(duration), 속도 일정(linear)하게 변하는 애니메이션 효과

<style>
  .transition {
    transition: width 2s linear 1s;
  }
  .transition:hover{width:300px;}
</style>

---

Animation

- 특정 지 애니메이션

<style>
  .animation {
     animation-name: changeWidth;
     animation-duration: 3s;
     animation-timing-function: linear;
     animation-delay: 1s;
     animation-iteration-count: 6;    /* 반복 횟수 */
     animation-direction: alternate;  /* 애니메이션 진행 방향 */
  }
 
  @keyframes changeWidth {
     from { width: 300px; }
     to { width: 600px; }
  }
</style>

 

 

종합

-  -10`(from) ➔ 10`(to)

까지 회전(rotation) 하고

1500ms 동안(duration)

  일정한 속도(linear)로 번갈아가며(alternate) 반복하는(infinite) 애니메이션 효과

<style>
  .box1 { 
     animation: rotation 1500ms linear infinite alternate
  }
  @keyframes rotation { 
     from{ transform: rotate(-10deg); }
     to{ transform: rotate(10deg); }
  }
</style>

 

 

---

 

메뉴 영역 애니메이션

 

hover

<style>
  #intro nav ul li a {       /* 1초동안 색상 전환 */
    transition: color 1s;  
  }
  #intro nav ul li a: hover { /* 마우스 올리면 색상 전환 */
    color: #917f7f;
  }
</style>

 

 

---

본문 영역 애니메이션

hover

- #main article.one : 배경색 변경 효과

- #main article img : 이미지 크기 확대 포함

<style>
  #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>