>  기사  >  웹 프론트엔드  >  CSS3의 애니메이션 타이밍 기능에 대한 소개 예

CSS3의 애니메이션 타이밍 기능에 대한 소개 예

零下一度
零下一度원래의
2017-06-27 10:15:381760검색

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([, [ start | end ] ]?): 두 개의 매개변수를 허용하는 단계 함수입니다. 첫 번째 매개변수는 함수의 단계 수를 지정하는 양의 정수여야 합니다. 두 번째 매개변수의 값은 start 또는 end일 수 있으며 각 단계의 값이 변경되는 시점을 지정합니다. 두 번째 매개변수는 선택사항이며 기본값은 end입니다.

  • cubic-bezier(, , , ): 특정 베지어 곡선 유형, 4개의 값은 간격 [0 내에 있어야 합니다. , 1]

여기에서는 주로 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() 设置间隔参数,可以实现分步过渡

第一个参数指定了时间函数中的间隔数量(必须是正整数)
第二个参数可选,接受 startend 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end

첫 번째 매개변수는 시간 함수의 간격 수를 지정합니다(양의 정수여야 함)
두 번째 매개변수는 선택사항이며 두 값(
start
    end
  • , 각 간격의 시작 또는 끝에서 발생하는 단계 변경을 지정합니다. 기본값은

    end입니다.

  • 연한 녹색

    = 지원
  • 빨간색

    = 지원 안 됨
분홍색 값IEFirefoxChromeSafariOperaiOS SafariAndroid 브라우저6.0-9.04.0-42.06.0 -8.015.0-29.0#118.0- 42.010.0+5.0-15.043.0+30.0+9.0+4.0-40.0 -webkit-
= 부분적으로 지원
Android Chrome 기본 지원 2.0-4.0 -webkit- -webkit- -webkit-6.0-8.4-webkit- 2.1-3.0-webkit-
-웹킷- -moz- 9.0+
  1. 16.0+

일부 장면에서는 잘못된 동작이 있을 수 있습니다.
🎜🎜🎜일부 브라우저는 의사 요소 애니메이션을 지원하지 않거나 지원이 충분하지 않습니다. 🎜🎜🎜🎜

위 내용은 CSS3의 애니메이션 타이밍 기능에 대한 소개 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.