animation-timing-function

animation-timing-function

grammar:

animation-timing-function:<single-animation-timing-function>[,<single-animation-timing-function>]*

<single-animation-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

Default value: ease

Applies to: all elements, pseudo object comprising: after and: before Guangzhou marble mechanical member

Inherited: no

Animations: No

Calcd: specified value

Media: visual

Value:

linear:
Linear transition. Bezier curve is equivalent to (0.0, 0.0, 1.0, 1.0)
ease:
Smooth transition. Bezier curve is equivalent to (0.25, 0.1, 0.25, 1.0)
ease-in:
From slow to fast. Bezier curve is equivalent to (0.42, 0, 1.0, 1.0)
ease-out:
From fast to slow. Bezier curve is equivalent to (0, 0, 0.58, 1.0)
ease-in-out:
From slow to fast and then slow. Bezier curve is equivalent to (0.42, 0, 0.58, 1.0)
step-start:
Is equivalent to the steps (1, start)
step-end:
Is equivalent to the steps (1, end)
steps(<integer>[, [ start | end ] ]?):
Step function accepts two arguments. The first argument must be a positive integer, the number of steps specified function. The second parameter value may be a start or end, each step specified point in time the value changes. The second parameter is optional, default value end.
cubic-bezier(<number>, <number>, <number>, <number>):
The specific type of Bezier curves, four required value in [0, 1] interval

Description:

Transition type retrieved or set of object animation
  • If a plurality of attribute values, separated by commas.
  • Script properties corresponding to animationTimingFunction .

Guess you like

Origin www.cnblogs.com/furuihua/p/12039637.html