animation-timing-function은 주로 CSS 애니메이션의 속도를 처음부터 끝까지 제어합니다.
선형: 선형 전환. 베지어 곡선과 동일(0.0, 0.0, 1.0, 1.0)
ease: 부드러운 전환. 베지어 곡선과 동일(0.25, 0.1, 0.25, 1.0)
ease-in: 느린 속도에서 빠른 속도로. 베지어 곡선과 동일(0.42, 0, 1.0, 1.0)
ease-out: 빠른 것에서 느린 것까지. 베지어 곡선(0, 0, 0.58, 1.0)
ease-in-out: 느린 것에서 빠른 것, 그리고 느린 것. 베지어 곡선에 해당(0.42, 0, 0.58, 1.0)
step-start: 단계(1, 시작)에 해당
step-end: 단계(1, 끝)에 해당
steps(
cubic-bezier(
여기에서는 주로 steps()
.heart{background-image: url('images/heart-sprite.png');-webkit-animation: animate 1s steps(28) infinite;animation: animate 1s steps(28) infinite; }@keyframes animate { from {background-position: 0 0;} to {background-position: -2800px 0;}}
steps()
를 소개합니다. 간격 매개변수를 설정하여 단계별 전환을 달성합니다steps()
设置间隔参数,可以实现分步过渡
第一个参数指定了时间函数中的间隔数量(必须是正整数)
첫 번째 매개변수는 시간 함수의 간격 수를 지정합니다(양의 정수여야 함)
第二个参数可选,接受start
和end
两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为end
두 번째 매개변수는 선택사항이며 두 값(
start
end
end
입니다.
연한 녹색
= 지원빨간색
= 지원 안 됨= 부분적으로 지원 | 값 | IE | Firefox | Chrome | Safari | Opera | ||
---|---|---|---|---|---|---|---|---|
Android Chrome | 기본 지원 | 6.0-9.02.0-4.0 | 4.0-42.0-webkit- | 6.0 -8.0-webkit- | 15.0-29.0-webkit-6.0-8.4-webkit- | 2.1-3.0-webkit- | ||
18.0- 42.0 | -웹킷- | 10.0+ | 5.0-15.0 | -moz- | 43.0+ | 9.0+ | 30.0+||
4.0-40.0 |
16.0+
위 내용은 CSS3의 애니메이션 타이밍 기능에 대한 소개 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!