CSS3 전환 ‘의 차이 무엇인가 ease-in, ease-out등,?
답변
CSS3의 전환 및 애니메이션은 공식적으로 “타이밍 함수”라고하는 여유를 지원합니다. 일반적인 사람은된다 ease-in, ease-out, ease-in-out, ease,과 linear하거나 사용하여 자신을 지정할 수 있습니다 cubic-bezier().
ease-in애니메이션이 천천히 시작되고 최고 속도로 끝납니다.ease-out애니메이션을 최고 속도로 시작한 다음 천천히 완료합니다.ease-in-out느리게 시작되고 애니메이션 중간에서 가장 빨라진 다음 천천히 완료됩니다.ease처럼ease-in-out이 빨리 종료보다 약간 시작 제외.linear여유를 사용하지 않습니다.- 마지막으로 구문에 대한 훌륭한 설명 이
cubic-bezier있지만 매우 정확한 효과를 원하지 않는 한 일반적으로 필요하지 않습니다.
기본적으로 이징 아웃은 멈출 때까지 느리게하는 것이고, 이징 인은 천천히 가속하는 것이고, 선형은 둘 다하지 않는 것입니다. MDN 에 대한 설명서timing-function 에서 더 자세한 리소스를 찾을 수 있습니다 .
앞서 언급 한 정확한 효과를 원한다면 놀라운 Lea Verou의 cubic-bezier.com 이 있습니다! 또한 다양한 타이밍 기능을 그래픽으로 비교하는 데 유용합니다.
또, 타이밍 함수는 , 같은 역할을 하지만 단지 전이의 시작과 끝 사이의 유한 한 단계를 수행한다. 전환보다는 CSS3 애니메이션에서 나에게 가장 유용했습니다. 좋은 예는 점으로 표시기를로드하는 것입니다. 전통적으로 하나는 일련의 정적 이미지 (예 : 8 개의 점, 각 프레임에 두 개의 색상 변경)를 사용하여 움직이는듯한 착각을 불러 일으 킵니다. A를 애니메이션과 변환, 별도의 프레임의 환상을 생산하는 모션을 사용! 얼마나 재미 있습니다.steps()linearsteps()steps(8)rotate
