전환과 애니메이션 효과 (transition,animation)

앞서 설명한 변형효과(transform)와 같이 이어서 설명될 트랜지션(transition)은 정해진 시간동안 이동하거나 크기가 커지는 등 다양한 시각적 효과를 제공하는 기능입니다. 

 

마우스를 올리면 버튼이 커진다거나 회전을 하는등의 다이나믹한 요소등을 많이 갖추고 있어, 간단하고 다양하게 사용됩니다. 자바스크립트와 플래시가 없어도 애니메이션의 무한 루프형태와 트랜지션을 활용해 간단한 이동 및 이펙트등의 효과를 보여줄 수 있습니다. ​ 

 

사실 앞서 소개한 기능, 트랜지션이나 애니메이션등의 이동 툴은 각종 브라우저의 하위버전에서는 지원하지 않는 단점은 있습니다만, 최신버전이 아니면 더 이상의 지원과 패치등을 해주지 않는 업계의 특성과 트렌드를 반영해 크로스브라우징쪽만 신경쓴다면, 진행해도 큰 문제는 없다고 생각합니다.. 

단, 안보일 경우를 대비하는 이미지들은 보조로 보여주어야겠죠. 물론 제작자의 의중이 중요하겠습니다.

 

---

 

transition 

트랜지션을 사용할때는 1) 효과, 2) 시간 을 지정해 주어야 합니다. 

특히 시간을 지정해 주지않으면 아무런 동작 효과가 없기 때문에 주의 해야합니다. 각각 기능을 지정해 주어도 되고, 아래의 명령문을 낱개로 기술해도 적용됩니다. ​ 

1. transition-property: (width, height ) 늘어나는 가로,세로폭 지정 
2. transition-duration: (n)s; 지속시간 
3. transition-timing-function: ( ); 속도의 곡선을 지정 
4. transition-delay: (n)s; 지정한 시간의 딜레이 후 시작 ​ 

 

[약식] transition: (1) (2) (3) (4); ​

 TIP  평소에는 가로,세로로 늘어나는 효과를 가장 많이 사용하기 때문에, all 구문을 이용하는 경우가 많습니다. 또한 곡선과 딜레이 후는 빈도가 낮아 1,2번만 유념하면됩니다.

 

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: all 0.5s; /* Safari */
  transition: all 0.5s;
}

div:hover {
  transform:scale(1.5);
}

▲ 100px의 가로세로를 가진 컨테이너 박스가 마우스를 올리면 transform:scale(1.5)로 자연스럽게 커지고 줄어든다. (0.5초 사이에)

반응형

 

---

 

transition-timing-function 

변하는 속성에는 각각 속도에 따른 변화를 줄 수 있습니다. ​

 

• ease - 느리게 시작해 빨리 끝나는 기본값입니다. 
• linear - 처음부터 끝까지 같은 속도로 변환합니다. 
• ease-in - 느리게 시작되어 변환합니다. 
• ease-out - 처음에는 빠르고 끝에 느려집니다. 
• ease-in-out - 느리게 시작해 느리게 끝납니다.

 

 

전환(transition) + 변환(transform) 

전환효과와  다음에 올 경우의 수를 변환으로 사용할 수 있습니다. 버튼에 줄 수 있는 기능들로 오버했을 경우 나타나는 속성과 돌아오게 만드는 속성을 일반 값에 대치하여 역동적인 버튼과 컨테이너등을 사용자의 반응에 따라 움직이게 끔 만듭니다.

div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* Safari */
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  -webkit-transform: rotate(180deg); /* Safari */
  transform: rotate(180deg);
}

▲ 트랜스폼 효과로 마우스를 올리면 회전하며 늘어나는 컨테이너 박스가 됩니다.

 

---

 

Animation 

css에서 @keyframes라는 명령문을 사용해 html상에서 원하는 시간 동안, 움직임을 줄 수 있습니다. 이도 앞서 설명한 트랜지션(transition)처럼 명령에 대한 속성문이 유기적으로 맞물려 있기 때문에, 자연스러운 움직임을 주기 위해서는 각 속성들을 디테일하게 제어하는게 포인트입니다. ​ 

 

순서는 키프레임 명령을 통해 대략적인 명령과 이름을 1차로 정해준 후, 1차에서 정한 이름을 가져와 2차에서 세부적인 디테일과 얼마 동안 보여줄지의 시간을 정해주는 것으로 마무리를 짓습니다. ​ 

 

 

1차: 키프레임과 이름 정하기 

@keyframes 

from(0%)과 to(100%)를 시간으로 환산해 한번에 행동을 정해주는 첫번째 기본속성과 각각의 행동들을 정해주는 0부터 100% 까지의 백분율로 단계별 두번째 기본속성을 가지고 있으며, 이는 키프레임 셀렉터라고도 부릅니다. 1차적인 속성에서는 키프레임의 이름과, 변화되는 속성을 지정해 줍니다.

 

[코드]

@keyframes animationname {css-styles;}

 

animationname: 사용할 이름을 정해줍니다. 

keyframes-selector: from,to 의 처음과 끝 속성이나 0~100%의 백분율을 시간으로 책정한 속성 중에 하나를 사용합니다. 

• 0-100% 
• from (same as 0%) 
• to (same as 100%) 

css-styles: 색상을 바꾼다던가 사이즈를 늘린다던가 등의, css기본 속성을 쓸 수 있습니다.

 

 

[예시1]

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

반응형

▲ example이라는 이름의 키 프레임이며, 빨간색으로 보여지는 컨테이너가 점점 노란색으로 바뀐다.

 

 

[예시 2]

@keyframes mymove {
    0%   {top: 0px;}
    25%  {top: 200px;}
    50%  {top: 100px; !important;}
    75%  {top: 200px;}
    100% {top: 0px;}
}

▲ mymove의 이름을 가진 키 프레임이며, 백분율로 단계적으로 이동하는 모션을 주었다. ​ 

※ !important를 사용하면, 그 프레임은 무시된다.

 

---

 

2차: 보여질 시간과 속도를 제어한다. 

1차에서 정한 키프레임 이름을 2차에서 대입해 보여질 시간과 속도등 디테일한 요소를 제어합니다. 속성 값은 아래를 참고하세요

[코드 6속성]

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

 

animation-name: 1차 키프레임에서 정한 이름을 넣어줍니다. 

animation-duration: 재생될 시간을 정해줍니다. 

animation-timing-function: 처음부터 끝까지 보여줄 속도를 정해줍니다. 

• linear : 애니메이션의 시작부터 끝까지 같은 속도를 유지합니다. 
• ease : 천천히 시작한 다음 가속도가 붙습니다. 
• ease-in : 애니메이션이 느리게 시작됩니다. 
• ease-out : 처음엔 빠르고 끝에는 느려집니다. 
• ease-in-out : 느리게 시작해 느리게 끝납니다. 

animation-delay: 딜레이를 가지고 시작합니다. 

animation-iteration-count: 애니메이션이 몇번 재생되는지 횟수로 정합니다. 

• number: 지정한 횟수만큼 재생되고 멈춥니다. 
• infinite: 무한 반복합니다. 

animation-direction: 재생한 후의 모션을 정합니다. 

• normal: 기본값 
• reverse: 반대로 재생합니다. 
• ㆍalternate: 앞으로 재생과 되감기를 반복합니다. 
• ㆍalternate-reverse: 되감기와 재생을 반복합니다.

 

 

[단축 및 약식코드]

div {
  animation: 키프레임이름 5s linear infinite;
}

위의 6속성을 한줄코드로 묶는 단축코드도 사용 할 수 있으며, 공간을 기점으로 차례대로 하나씩 나열해 주면 적용됩니다.

 

---

 

1,2차 속성 완료 후 모습 

위의 1차,2차속성을 완료한 후 적용한 후의 예시 모습입니다. 디테일하게 1차를 정의하지 않고 위의 약식코드를 사용해 응용합니다.

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: relative;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-name: example;
  -webkit-animation-duration: 5s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  /* Standard syntax */
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* Standard syntax */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

※위의 6속성을 한번에 서술하지 않고, 4속성을 기준으로 약식코드로 아래와 같이 많이 사용합니다.

 

animation: 키프레임이름 110s linear infinite;

@keyframes ani1 {
	0% { left:-1800px;}
	100% { left:1800px;}
}

 

 

본문 및 이미지 출처: https://www.w3schools.com