css timing-function의 step 깊이 분석

steps
4

1、steps

steps
대상 애니메이션의 과도 유형 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% 상태의 화면이 깜빡거리며 지나가지만 백워즈로 보완하기 어렵다.