정보실

웹학교

정보실

css CSS 전환 및 애니메이션에 대한 실용적인 안내서

본문

우리는 그렇게 심하게 이해하고 싶습니까? 내 말은, 혹시 딱딱한 UI를 즐기는 사람이 있습니까? 구성 요소가 미끄러져서 완전히 멈추기 전에 속도가 느려지는 것을 보고 기뻐하지 않는다고 누구나 인정할 수 있습니까? 좋은 점이 있습니다. 그렇다면 그 특별한 감촉은 무엇이며 왜 재생산 하기가 어렵습니까?


답은 물리입니다. 특히 나무에서 과학자에게 떨어지는 사과 전용 과학 분야 인 뉴턴 물리학은 고전 역학이라고도 합니다.


https://blog.prototypr.io/this-aint-disney-a-practical-guide-to-css-transitions-and-animations-a8b87e7c5531 


사과가 나무에서 떨어지기 직전, 초당 0 미터로 움직입니다. 대기압, 바람 및 기타 요소에 따라 충격을 가할 때까지 특정 속도로 0에서 끝 속도까지 가속합니다. 그런 다음 사과와 접촉 표면의 탄성에 따라 사과가 여러 번 튀어 오며, 바운스 높이는 각 바운스 후 약 절반 씩 줄어 듭니다.

1*376Nm1Gcee_thzpRs2UxyQ.png 


위의 두 차트를 살펴보면 자유 낙하하는 물체의 곡선과 지상에 튀는 물체의 곡선에 대칭이 있음을 알 수 있습니다. 이 대칭은 중력의 결과입니다.


중력은 재료의 양과 밀도에 따라 각 천체에 고유합니다. 지구의 고유 한 중력 서명은 우리에게 친숙하므로 협회에 의해 서명을 따르는 모든 것 역시 친숙하게 느껴집니다.


또한 지구의 중력에 맞지 않는 것은 지구상에서 목격하기가 어려울 것입니다. 예를 들어, 슬로우 모션으로 튀어 나온 공, 또는 더 높이 튀어 나온 공 또는 높이에 따라 튀어 나온 공을 목격한다고 상상해보십시오. 실제 현실에서는 방해가 될 것입니다.


그러나 디지털 사용자 경험은 운동 물리학을 규제하는 엄격한 법률에 구속되지 않습니다. 설계자는 기본적으로 물리 패턴을 설계하고 이를 설계에 효과적으로 적용하기 위해 자체 장치에 맡겨져 있습니다. 애니메이션을 중심으로 하는 이 자체 문화는 위험 요소를 유발하며, 디자이너는 일반적으로 새로운 기술을 위해 예약 된 프로젝트의 "위험 예산"에 대한 지분을 얻지 못하기 때문에 소규모 팀의 경우 애니메이션을 테이블에서 제외 시킵니다.


그렇게 말하면 CSS를 사용할 때 완전히 어둠에 빠지지는 않습니다. 시작하는 데 유용한 도구와 기본 값이 있으며 몇 가지 기본 지식을 통해 사용자에게 쾌적한 애니메이션 환경을 도입 할 수 있습니다.


타이밍 

1*pDUYsyV6JQjoD8_HROrg0Q.gif 


전환 대 애니메이션에 들어가기 전에 먼저 타이밍에 대해 논의 해 봅시다. 타이밍은 둘 다에 필요한 개념입니다. 타이밍은 주어진 간격 동안 애니메이션 진행률이 어떻게 변하는 지 측정하는 것입니다. CSS의 애니메이션 타이밍은 큐빅 베 지어 기능을 사용하여 수행됩니다.


cubic-bezier(a, b, c, d) 


수학의 베 지어 곡선에서 파생 된 이 함수는 "앵커"라고 하는 시작 및 끝 지점 (a 및 d)과 "핸들"이라고 하는 두 개의 중간 지점 (b 및 c)에 대한 매개 변수를 사용합니다.


CSS는 가장 일반적으로 사용되는 타이밍을 기반으로 큐빅 베 지어 기능의 5 가지 사전 정의 된 인스턴스를 가지고 있습니다.


1*sZE1y0ewdM2VH8SXoY3dwg.png 

X 축은 시간을 나타내고 (오른쪽으로 이동), Y 축은 애니메이션 진행을 나타냅니다 (위로 이동)


  • linear : 같은 속도로 시작하고 끝납니다. 동작보다는 색상 및 불투명도와 같은 속성에 더 좋습니다.
  • ease : 빠르게 가속되고 점차 느려집니다. 이것은 CSS 기본이며, 다목적 기능입니다.
  • ease-in : 점진적으로 가속하고 속도가 끝납니다. 시야를 벗어난 요소 애니메이션에 이상적입니다.
  • ease-out : 속도로 시작하고 느려집니다. 요소를 보기에 애니메이션으로 만드는 데 적합합니다.
  • ease-in-out : 천천히 가속 한 다음 속도가 느려집니다. 쉽게 시작하지만 시작 속도가 느립니다. 화면에서 시작하고 끝나는 애니메이션에 유용 할 수 있습니다.

1*PQR9oa_BDoqBlXCa5E-1Aw.gif 


CSS에서 별칭을 사용하는 방법은 다음과 같습니다.


#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;} 


아래 코드는 위의 각 별명을 각각의 큐빅 베지어 기능으로 대체 한 것을 보여줍니다. 중간 점도 시작점과 끝점이므로 선형에는 두 개의 참 점이 있습니다. ease-in에는 마지막 두 점이 1이므로 세 점이 있습니다. ease-out에는 처음 두 점이 0이므로 세 점이 있습니다. 각 인스턴스를 해당 곡선에 맞추고 점 수를 확인할 수 있습니다. 커브 모양에 영향을 줍니다.


#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);} 


위의 코드에서는 전환에 사용되는 전환 타이밍 기능을 사용하고 있습니다. 동일한 방식으로 작동하지만 애니메이션에 적용되는 애니메이션 타이밍 기능도 있습니다.


전환 (Transitions) 


1*7rJ10PzVXLFA929U0Zde_A.gif 


전환은 요소 상태 (마우스 오버, 클릭, 드래그 등)의 변경에 의해 트리거 됩니다. 버튼 위로 마우스를 가져 가면 색상이 매끄럽게 바뀌면 호버 전환입니다. 모든 전환에는 초기 상태와 최종 상태가 있으며 보다 정교한 작업을 위해서는 나중에 다룰 애니메이션을 사용하고 싶을 것입니다. 지금은 코드 구조부터 시작하겠습니다.


transition: [*property] [*transition-duration] [transition-timing-function] [transition-delay]; 


전이 속성에는 두 개의 필수 매개 변수와 기본값이 있는 두 개의 선택적 매개 변수가 사용됩니다. 쉼표로 구분하여 여러 전환을 전달할 수도 있습니다.

  • * property : 전환 할 요소의 CSS 속성.
  • * transition-duration : 애니메이션이 실행되는 시간입니다.
  • transition-timing-function : 완화 기능. 기본값은 쉬움입니다.
  • transition-delay : 애니메이션이 시작되기 전의 시간. 기본값은 0입니다.

/*1*/ transition: background-color 2s;
/*2*/ transition: background-color 2s 0.5s;
/*3*/ transition: background-color 2s ease-in;
/*4*/ transition: background-color 2s ease-out 0.5s;
/*5*/ transition: background-color 2s, height 1s ease-in-out;
/*6*/ transition: all 1s ease-out; 


위의 코드에서 CSS 전환 속성의 변형을 볼 수 있습니다. 처음 5 개의 인스턴스는 2 초의 배경색 전환이 있습니다. 두 번째와 네 번째의 전환 지연 시간은 0.5 초입니다. 다섯 번째 예에는 높이에 대한 두 번째 전이가 있으며 전이가 쉼표로 구분 된 방법을 볼 수 있습니다. 마지막 예제는 모두를 사용합니다. 

즉, 주어진 시간 (이 경우 1 초) 동안 요소에 대한 시각적 변경이 발생합니다.


아래 코드는 CSS 전환을 사용하는 간단한 요소 예입니다.


.glowAndGrow {
height: 100px;
transition: background-color 0.5s, height 1s;
}
.glowAndGrow:hover {
background-color: gold;
height: 200px;
}
<div class="glowAndGrow">This box glows and grows on hover</div>


CSS는 또한 요소를 초기 상태로 다시 전환하므로 위의 예에서 역전 이를 다르게 하지 않으려면 호버 케이스에 전환 속성을 추가 할 필요가 없습니다. (때로는 요소, 특히 큰 요소보다 빠르게 떠나는 요소를 원할 수도 있습니다.)

1*_Y6hZK9qW3hzlZI1GGkdGA.gif 


Animations 


1*-iYn-H6EpQBSHnnB2qY40w.gif 


상태 변경으로 트리거되는 전환과 달리 애니메이션은 키 프레임이라는 CSS 함수와 함께 사용됩니다. 또한 애니메이션은 초기 및 최종 상태 이상을 가질 수 있으며 그 사이에 많은 수를 가질 수 있습니다.


animation: [*animation-name] [*animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-direction] [animation-fill-mode] [animation-play-state]; 


전환 속성과 마찬가지로 애니메이션 속성은 타이밍 및 지연에 필요한 두 개의 선택적 매개 변수 뿐만 아니라 두 개의 필수 매개 변수를 사용하며 여러 애니메이션을 사용할 수도 있습니다. 그러나 애니메이션은 더욱 강력하기 때문에 반복 횟수, 방향, 채우기 모드 및 재생 상태에 대한 선택적 매개 변수도 있습니다.

  • *animation-name : 키 프레임의 이름입니다.
  • *animation-duration : 애니메이션이 실행되는 시간입니다.
  • animation-timing-function : 완화 기능. 기본값은 ease입니다.
  • animation-delay : 애니메이션이 시작되기 전의 시간. 기본값은 0입니다.
  • animation-iteration-count : 애니메이션이 몇 번이나 실행 되어야 하는지. 기본값이거나 숫자이거나 infinite 일 수 있습니다.
  • animation-direction : 앞으로, 뒤로 또는 번갈아 움직 일지 여부. 기본값은 normal입니다.
  • animation-fill-mode : 애니메이션 스타일이 나타날 때. 기본값은 none입니다.
  • animation-play-state : 애니메이션이 재생 중인지 여부. 기본값은 running입니다.


애니메이션 코드의 후반은 키 프레임입니다. 키 프레임은 애니메이션을 구성하는 일련의 상태입니다.


@keyframes bounce {
0% {
transform: scale(0.1);
opacity: 0;
}
60% {
transform: scale(1.2);
opacity: 1;
}
100% {
transform: scale(1);
}
}
.ball {
animation: bounce 2s infinite;
}


위의 예에서 요소는 시퀀스의 첫 번째 단계에서 투명하게 시작하여 크기의 10 %로 축소되었습니다. 두 번째 단계는 지속 시간의 60 %에서 완료되며 이 애니메이션의 지속 시간은 2 초이므로 애니메이션의 첫 1.2 초 동안 요소가 투명에서 불투명으로, 10 %에서 120 %로 변경됩니다. 규모. 마지막 0.8 초 동안 크기의 100 %로 다시 스케일 됩니다.


1*x7qPNofsOtKNLh_wkatYdA.gif 


사용 시기 


이전 기사에서는 UI 디자인의 음영과 색조가 빛의 물리적 특성을 모방 할 때 가장 유쾌한 방법에 대해 썼습니다. 마찬가지로, 전환 및 애니메이션과 관련하여 이상적인 경험은 중력의 법칙을 존중하는 경험입니다.


게임 디자이너가 아니라면 애니메이션 선택에 따라 선택하십시오. 좋은 효과는 처음에는 매력적일 수 있지만 천 번째 시간이 지나면 사용자가 그것을 보고 피곤해 할 수 있습니다.


반면에 기능적인 애니메이션은 결코 오래되지 않습니다. 애니메이션을 활용하여 사용자와 의사 소통 할 수 있는 방법을 찾으면 생생한 경험을 극대화 할 수 있는 실질적인 기회를 얻게 될 것입니다.


다음은 유용한 정보를 제공하는 몇 가지 예입니다.


1*WtAD-edH8jQYlil7Pddkzg.gif 

Gleb Stroganov on Dribbble


1*FrqtoR7Z-E4pmUPQd0dzGg.gif 

uplabs.com


1*smBKLNoNjbskmXQz9moKFA.gif 

freefrontend.com


1*kZwOniuPY3pV4vC76i3mJA.gif 

smashingmagazine.com


1*TTWyllwgQ5GBqiZXlyce6g.gif 

laracasts.com




페이지 정보

조회 125회 ]  작성일19-08-16 20:49

웹학교