Home > Article > Web Front-end > An example introduction to animation-timing-function in CSS3

An example introduction to animation-timing-function in CSS3

零下一度Original: 2017-06-27 10:15:381731browse

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

linear: Linear transition. Equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0)
ease: smooth transition. Equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0)
ease-in: from slow to fast. Equivalent to Bezier curve (0.42, 0, 1.0, 1.0)
ease-out: from fast to slow. Equivalent to Bezier curve (0, 0, 0.58, 1.0)
ease-in-out: from slow to fast and then to slow. Equivalent to Bezier curve (0.42, 0, 0.58, 1.0)
step-start: Equivalent to steps(1, start)
step-end: Equivalent to steps(1, end)
##steps([, [ start | end ] ]?): A step function that accepts two parameters. The first parameter must be a positive integer specifying the number of steps of the function. The value of the second parameter can be start or end, specifying the time point when the value of each step changes. The second parameter is optional and the default value is end.

, , , ): Specific Bezier curve type, 4 The value needs to be within the range [0, 1]

Here we 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 achieve step-by-step transition

The first parameter specifies the interval in the time function Quantity (must be a positive integer)

The second parameter is optional and accepts two values:

start and end, specified in The starting point or end point of each interval changes step by step, and the default is end.

Light green
= Supported
Red
= Not supported
pink
= Partial support

##Values IEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome##Basic Support-webkit-#15.0-15.0-moz--webkit-Wrong behavior in some scenarios


6.0-9.02.0-4.0	4.0-42.0		6.0-8.0^-webkit-	15.0-29.0^-webkit-	6.0-8.4^-webkit-	2.1-3.0^-webkit-	18.0-42.0^-webkit-	10.0+
		43.0+9.0+	30.0+	9.0+	4.0-40.0		16.0+
			30.0+	9.0+	4.0-40.0		16.0+

Some browsers do not support pseudo-element animation, or do not support it well enough. Try not to use pseudo-elements for animation

The above is the detailed content of An example introduction to animation-timing-function in CSS3. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5+CSS3 static page project experience summaryNext article：HTML5+CSS3 static page project experience summary

See more

An example introduction to animation-timing-function in CSS3

Related articles