css timing-function의 step 깊이 분석
4
대상 애니메이션의 과도 유형 steps(n, [start | end])를 검색하거나 설정합니다. 기본값은 end step-start입니다. steps(1,start) step-end와 같습니다. steps(1,end)와 같습니다. 예를 들어 아래의 애니메이션 키 프레임 그리기
div{
width: 100px;
height: 100px;
animation: run 5s steps(1,end);
}
@keyframes run{
0%{
width: 100px;
height: 100px;
}
20%{
width: 120px;
height: 120px;
}
40%{
width: 140px;
height: 140px;
}
60%{
width: 160px;
height: 160px;
}
80%{
width: 180px;
height: 180px;
}
100%{
width: 200px;
height: 200px;
}
}
위 스타일과 같이 긴 시간 동안 우리가 설정한 애니메이션은 유창한 변화(과도적인 애니메이션)입니다. step 속성을 설정할 때 애니메이션은 더 이상 유창한 변화가 아니라'페이지 넘기기'처럼 (예: 0%-20%) 사이의 과도 애니메이션을 무시하고 설정한 시간을 프레임 단위로 나눈다.시간대별로 한 프레임 한 프레임 뒤로 점프(setInterval과 유사)
steps(1,end)의 1은 (예:0%-20%) 사이에서 1s가 뛰는 프레임입니다. 2로 설정하면 10% {width:110px;height:110px;}그리고 여기서 과도하면 값이 클수록 변화가 섬세해진다.steps(1,end)의 end는 이 애니메이션이 끝날 때까지 현재 프레임 상태를 유지합니다. (0%-20%는 프레임 시간 동안 0% 상태를 유지합니다) 상례에서 애니메이션이 끝났을 때 100% 상태의 화면이 깜빡거리며 초기 상태로 돌아갑니다. forwards 보완(순환하지 않으면 infinite) start는 실행할 때 다음 프레임 상태를 유지합니다.이 애니메이션이 끝날 때까지(0%-20%는 프레임 시간 동안 20% 상태를 유지한다) 상례에서 애니메이션이 시작될 때 0% 상태의 화면이 깜빡거리며 지나가지만 백워즈로 보완하기 어렵다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
v-bind를 사용하여 CSS에 대한 Vue3 상태애플리케이션을 더 동적으로 만들기 위해 Vue는 동적 상태를 템플릿 내부의 마크업에 연결할 수 있도록 합니다. 예를 들어 특정 기준이 충족되는 경우에만 요소에 클래스를 적용할 수 있습니다. 그러나 구성 요소 상태가 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
