[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 11

11-1 트랜지션과 애니메이션

변형

transform(변형) :웹문서에서 웹 요소에 움직이는 효과를 주는것. 특정 요소의 크기나 형태 등 스타일이 바뀌어 시각적인 효과를 줌.

 

2차원 변형/ 3차원 변형

-2차원 변형

수평이나 수직값만을 가져 수평이나 수직으로 웹 요소 변형됨

 

-3차원 변형

2차원 변형에 z값을 추가하면 3차원 변형이 됨

z값은 앞뒤로의 이동을 의미, 값이 커질수록 보는 사람쪽으로 다가옴

 

transform이라는 키워드 뒤에 필요한 함수를 적어주면 됨

위치를 옮길때 -> translate()

크기를 조절 -> scale()

 

transfrom: translate()

가로 방향(x축)으로 옮길때는 translateX(), 세로 방향(y축)으로 옮길 때는 translateY(), x와 y를 한번에 조절할때는 translate( , )을 사용함

 

#movex:hover { <-해당요소(id="movex")로 마우스오버 되면

  transform: tranlateX(50px); <-x축(가로, 오른쪽)으로 50px 이동

}

#movey:hover { <-해당요소(id="movey")로 마우스오버 되면

  transform: tranlateY(20px); <-y축(세로, 아래)으로 20px 이동

}

#movexy:hover { <-해당요소(id="movexy")로 마우스오버 되면

  transform: tranlate(10px, 20px); <-x축(가로, 오른쪽)으로 10px, y축(세로, 아래)으로 20px 이동

}

 

transform: scale()

scaleX()는 x축(가로)으로 확대, scaleY()는 y축(세로)으로 확대, scale( , )은 x,y축으로 확대

 

transform: scaleX(2); <-x축으로 2배 확대(가로길이가 2배가 됨)

transform: scaleY(1.5); <-y축으로 1.5배 확대(세로길이가 1.5배가 됨)

transform: scale(0.7); <-x,y축으로 0.7배 확대(가로세로 길이가 0.7배로 축소됨)

 

transform: rotate()

평면상에서 회전시킬 때 사용

각도값이 양수이면 시계방향으로 회전, 음수이면 반시계방향으로 회전

transform: rotate(40deg); <- 시계방향으로 40도 회전

 

 

3차원 회전으로 좀더 입체감 있는 효과를 줄 수 있음

 

perspective를 추가하지 않으면 입체감이 잘 느껴지지 않음

0보다 큰 값을 줘야하며, 사용자가 보기에 얼마나 깊이감이 있는지를 표현해줌.

rotate의 부모요소에게 적용해줘야함

 

 

perspective: 200px; <-원근감/깊이감 추가. 0보다 큰 값 사용해야함. 부모요소에 추가되었음.

 

...

 

#rotate: hover {

  transform: rotateX(55deg); <-x축으로 55도 회전

}

 

 

transform: skew()

비튼다는 의미(사각형을 x축으로 비틀면 사각형->위아래가 평행한 평행사변형이 됨. 안의 텍스트도 비틀림)

기준이 x축인지, y축인지, x축과 y축 모두인지에 따라 skewX(), skewY(), skew( , )를 사용

transform: skewX(15deg) -> 위아래 평행, 왼쪽 위 꼭짓점과 오른쪽 아래 꼭짓점을 잡아 늘린 모양이 됨

---

11-2 트랜지션과 애니메이션

트랜지션

css의 속성이 바뀔때 시간에 따라서 천천히 자연스럽게 바뀌도록 하여 애니메이션과 같은 효과를 주는 것.

예를 들어, 마우스 오버 시 색이 바뀌도록 설정할때 색깔이 급하게 휙휙 바뀌는 게 아니라 천천히 바뀌게 함

모양이 바뀌도록 설정할때도 사각형->원으로 바로 바뀌는게 아니라 모서리가 서서히 둥글어지며 변하게 됨

 

transition-property

내가 스타일 속성을 변화시키려 할때 어떤 속성에 트랜지션 효과를 만들지 지정함

 

예)

마우스오버 했을 때 width값과 height값을 변화시키려고 함

이때 width와 height 모두에 트랜지션을 적용시킬것임

 

.box {

  margin: 20px auto;

  width: 100px;

  background-color: #07f;

  border: 1px solid #222;

  transition-property: width, height; <-width값과 height값에 트랜지션 적용함

  transition-duration: 2s, 1s; <-트랜지션 효과를 몇초동안 지속할건지를 지정, 값 하나만 있으면 둘 모두에 동일한 시간 적용

}

 

.box : hover { <-마우스오버 되면 width와 height를 변화시킴

  width: 200px;

  height: 120px;

}

 

만약 트랜지션으로 변화시킬 속성이 여러개라면

transition-property: all; 로 주면 됨.

 

이렇게 되면 hover했을때 변화되는 모든 속성에 트랜지션 적용됨

 

transition-delay를 설정하면 트랜지션 되기까지 잠깐 기다렸다가 효과 적용됨

transition-delay : 1s; <- 마우스오버 되자마자 트랜지션 적용되지 않고, 1초 이따 변하기 시작함

 

transition-timing-function은 트랜지션의 시작, 중간, 끝나는 부분의 속도를 지정함

linear는 속도가 일정하게 변함

 

transition: 3s linear;

 

ease-in은 천천히 시작

ease, ease-out, ease-in-out 등이 더 있음

실행시간이 길 경우 같은 시간을 주어도 차이가 커짐

 

 

transition으로 묶어서 표현할 수도 있음

 

transition : all  2s ease-in (모든 요소에 트랜지션 적용, 2초간 트랜지션 실행, 속도는 ease-in)

 

all은 생략 가능

시간은 transition-duration(트랜지션 실행하는 시간), transition-delay(트랜지션 지연시간).. 하나만 있다면 duration임

다음으로 transition-timing-function을 써줌. 다섯가지 값이 올 수 있음

 

CSS 애니메이션

특정 지점에서 스타일을 바꾸면서 애니메이션 효과를 만드는 것

스타일이 바뀌는 지점=keyframe

키프레임마다 이름을 지정해놓고, 그 이름을 가져다 사용하게됨

 

@keyframes라는 키워드를 사용하여 각 애니메이션을 정의함.

 

#box1 {

  ...

  animation-name: rotate; <- 정의된 애니메이션을 원하는 요소에서 사용

}

 

...

 

@keyframes rotate { <-rotate 애니메이션 정의

 

}

 

애니메이션을 사용하는 방법 ( @keyframes )

@keyframes 키워드 뒤에 애니메이션 이름을 써주고,

어느 위치에서 스타일이 바뀌는지를 지정해줘야 하는데

처음과 끝에서만 바뀐다면, from { ... } to { ... } 로 써주면 됨

 

@keyframes shape { <-애니메이션 이름은 shape, 테두리와 모양이 변하는 애니메이션임

  from {

    border: 1px solid transparent; <-1px 실선의 투명한(transparent) 테두리로 시작해서

  }

  to { <-끝날때는 

    border: 1px solid #000; <-검은색 1px 실선 테두리

    border-radius: 50%; <-원으로 바뀌도록

  }

}

 

@keyframes rotate { <-rotate 애니메이션을 정의

  from {

    transform: rotate(0deg); <-시작할때는 0도에서

  }

  to {

    transform: rotate(45deg); <-끝날때는 45도까지 회전

  }

}

 

 

한 단계로 변해서 시작과 끝만 정하는게 아니라, 여러 단계로 변하는 애니메이션을 정의하고 싶은 경우

%값을 이용함

 

@keyframes rotate { 

  from {  transform: perspective(120px)  rotateX(0deg)  rotateY(????);  } //강의내용에서 짤려서 안보임

  50% {  transform: perspective(120px) rotateX(-180deg)  rotateY(????);  } <-중간 스타일을 넣을 수 있음. 50% 말고 30%, 20% 등 숫자 바꿀수도 있음

  to {  transform: perspective(120px)  rotateX(-180deg)  rotateY(????);  }

}

 

이렇게 애니메이션을 정의했다면, 애니메이션을 적용하고 싶은 곳에 가서 적용하면 됨

 

animation-name 속성으로 내가 사용할 애니메이션이 무엇인지 알리고,

animation-duration 속성으로 애니메이션이 실행될(지속될) 시간을 지정,

animation-iteration-count 속성은 이 애니메이션을 몇 번 반복할지를 지정, 값으로 infinite를 주면 애니메이션 무한반복됨

 

#box2 {

  background-color : #8f06b0;

  border :1px solid transparent;

  animation-name : rotate;

  animation-duration : 3s; <-애니메이션 1회 반복 시간=3초

  animation-iteration-count : infinite; <-해당 애니메이션 무한반복

}

 

=>

@keyframes로 애니메이션 정의

animation-name: 으로 사용할 애니메이션 이름 지정,

실행시간, 반복 횟수 등을 정할 수도 있음

 

얘네를 각각 지정하지 않고 animation 속성으로 묶어서 지정할 수도 있음

 

.box {

  width : 100px;

  height : 100px;

  margin : 60px auto;

  animation : rotate 1.5s infinite, background 1.5s infinite alternate;

}

 

alternate는 animation-direction의 속성값으로,

애니메이션 실행을 종료 후 다시 반복할때 모양이 어색해질 수 있음.

따라서 animation-direction: alternate; 로 설정시 애니메이션 실행 종료 후 반대 방향으로 돌아가도록(역재생) 설정 

 

콤마를 이용해 두 애니메이션을 동시에 적용할 수 있음

rotate 애니메이션을 적용, 1.5초간 실행, 무한반복되도록 함

& background 애니메이션을 1.5초 적용, 무한반복, 반복시 역재생 포함