전환 CSS

전환이란 무엇입니까

전환은 CSS에서 애니메이션을 만드는 가장 쉬운 방법입니다. 그래서 나는 전환의 역사에 대해 깊이 파고들지 않을 것입니다. 우리 개발자들은 항상 최종 결과를 보고 싶었고 우리는 앞으로 나아갔습니다. 그래서 최종 결과를 위해 아래에 Codepen을 첨부합니다.

살펴보고 앞으로 이동하십시오.

https://codepen.io/sk3213/pen/XWjdwMY

이제 몇 가지 기본 사항부터 시작하겠습니다.

구문:

transition:
property
duration
timing-function
delay;

글쎄, 그것을 사용하는 방법은 수천 가지가 있지만 대부분은 호버링의 경우에 사용됩니다. 그래서 간단히 예를 들어 설명하겠습니다.

.First{
background: black;
transition: background 1s ease-in; 
// Here I am writing background because I want to change background on hover
}

.First:hover {
background: red;
// Magic 
}

전환 타이밍 기능 값

1. linear
2. ease
3. ease-in
4. ease-out
5. ease-in-out

CSS 애니메이션을 사용하여 애니메이션할 수 있는 속성

여기에서 전환을 통해 애니메이션할 수 있는 모든 속성 목록을 찾을 수 있습니다.

출처

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

전진

입방 베지어 - https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function