CSS3 animation-timing-function steps (), css3animationsteps

CSS3 animation-timing-function steps (), css3animationsteps

Animation-timging-function is mainly used to control the speed of css animation from start to end.

Linear: linear transition. Equivalent to the besell curve (0.0, 0.0, 1.0, 1.0)

Smooth: smooth transition. Equivalent to the besell curve (0.25, 0.1, 0.25, 1.0)

Slow-in: from slow to fast. Equivalent to the besell curve (0.42, 0, 1.0, 1.0)

Slow-out: From fast to slow. Equivalent to the besell curve (0, 0, 0.58, 1.0)

Slow-in-out: from slow to fast and then to slow. Equivalent to the besell curve (0.42, 0, 0.58, 1.0)

Step-start: equivalent to steps (1, start)

Step-end: equivalent to steps (1, end)

Steps (<integer> [, [start | end]?) : Step Functions that accept two parameters. The first parameter must be a positive integer that specifies the number of steps of the function. The second parameter can be set to start or end, which specifies the time when the value of each step changes. The second parameter is optional and the default value is end.

Cubic-bezr (<number >,< number>): the type of the beiser curve. Four values must be in the range [0, 1 ].

 

 

Here we will mainly introduce 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()Set the interval parameter to implement step-by-step transition.

The first parameter specifies the number of intervals in the time function (must be a positive integer)
The second parameter is optional. AcceptstartAndendTwo values, which indicate a step change at the start or end of each interval. The default value isend.

 

 

• Light Green = supported
• Red = not supported
• Pink = partially supported

Values	IE	Firefox	Chrome	Safari	Opera	IOS Safari	Android Browser	Android Chrome
Basic Support	6.0-9.0	2.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-#1	18.0-42.0-Webkit-
	10.0 +	5.0-15.0-Moz-	43.0 +	9.0 +	30.0 +	9.0 +	4.0-40.0-Webkit-
		16.0 +

1. Incorrect behavior may occur in some scenarios
2. Some browsers do not support pseudo-element animation or are not well supported. Do not use pseudo-element for animation as much as possible.