Home  >  Article  >  Web Front-end  >  What does keyframes mean in css

What does keyframes mean in css

青灯夜游
青灯夜游Original
2021-02-25 10:51:398290browse

In CSS, keyframes means "key frames", which is a CSS rule for creating animations. It can define the behavior of a period of a CSS animation; it can be specified by establishing key frames along the animation sequence. Intermediate step during an animation sequence loop, syntax "@keyframes animation-name {keyframes-selector {css-styles;}}".

What does keyframes mean in css

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

What does keyframes mean in css

CSS @keyframes rules

@keyframes rules are used to specify animation rules and define a cycle of a CSS animation the behavior of.

To define animation, you must start with the @keyframes rule. A @keyframe rule consists of the keyword "@keyframes", followed by an identifier giving the name of the animation (which will be referenced using animation-name), and then a set of style rules (separated by curly braces). The animation is then applied to the element by using the identifier as the value of the "animation-name" attribute.

Syntax:

@keyframes animation-name {keyframes-selector {css-styles;}}

Description:

The principle of creating animation is to gradually change one set of CSS styles into another set of styles. You can change this set of CSS styles multiple times during the animation. Specifies when the change occurs as a percentage, or via the keywords "from" and "to", which are equivalent to 0% and 100%. 0% is the start time of the animation, 100% is the end time of the animation. For best browser support, you should always define 0% and 100% selectors.

Note: Please use the animation property to control the appearance of the animation and bind the animation to the selector.

What does keyframes mean in css

Example:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style>
		@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);
		body {
			background-color: #F5F5F5;
			color: #555;
			font-size: 1.1em;
			font-family: &#39;Gentium Basic&#39;, serif;
		}
		
		.container {
			margin: 50px auto;
			min-width: 320px;
			max-width: 500px;
		}
		
		.text {
			font-size: 3em;
			font-weight: bold;
			color: #0099cc;
			-webkit-transform-origin: left center;
			-ms-transform-origin: left center;
			transform-origin: left center;
			-webkit-animation: fall 4s infinite;
			animation: fall 4s infinite;
		}
		
		@-webkit-keyframes fall {
			from,
			15% {
				-webkit-transform: rotate(0) translateX(0);
				transform: rotate(0) translateX(0);
				opacity: 1;
				-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
				animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
			}
			50%,
			60% {
				-webkit-transform: rotate(90deg) translateX(0);
				transform: rotate(90deg) translateX(0);
				opacity: 1;
				-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
				animation-timing-function: cubic-bezier(.13, .84, .82, 1);
			}
			85%,
			to {
				-webkit-transform: rotate(90deg) translateX(200px);
				transform: rotate(90deg) translateX(200px);
				opacity: 0;
			}
		}
		
		@keyframes fall {
			from,
			15% {
				-webkit-transform: rotate(0) translateX(0);
				transform: rotate(0) translateX(0);
				opacity: 1;
				-webkit-animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
				animation-timing-function: cubic-bezier(.07, 2.02, .67, .57);
			}
			50%,
			60% {
				-webkit-transform: rotate(90deg) translateX(0);
				transform: rotate(90deg) translateX(0);
				opacity: 1;
				-webkit-animation-timing-function: cubic-bezier(.13, .84, .82, 1);
				animation-timing-function: cubic-bezier(.13, .84, .82, 1);
			}
			85%,
			to {
				-webkit-transform: rotate(90deg) translateX(200px);
				transform: rotate(90deg) translateX(200px);
				opacity: 0;
			}
		}
	</style>
</head>

<body style="text-align: center">
	<div class="container">
		<p class="text">Falling Text</p>
	</div>
</body>

</html>

Rendering:

What does keyframes mean in css

##[Recommended tutorial:

CSS video tutorial

The above is the detailed content of What does keyframes mean in css. 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