CSS3动画里的@keyframe的定义和应用

作者：andy0012019.09.25来源：Web前端之家浏览：16920评论:0

关键词：html css3 keyframes

@keyframes规则用于指定动画规则，定义一个CSS动画的一个周期的行为；可通过沿动画序列建立关键帧来指定动画序列循环期间的中间步骤。动画是使用可变的CSS样式创建的；在动画期间，CSS属性可以多次更改。

定义动画，必须从@keyframes规则开始。@keyframe规则由关键字“@keyframes”组成，后跟一个标识符，给出动画的名称（将使用animation-name引用），然后是一组样式规则（用大括号分隔）。然后，通过使用标识符作为“animation-name”属性的值，将动画应用于元素。

语法：

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

animation-name：这是必需的，它定义动画名称。

keyframes-selector：定义动画的百分比，它介于0％到100％之间。一个动画可以包含许多选择器。

/* 定义动画n */
@keyframes your-animation-name {
    /* style rules */
}

/* 将其应用于元素 */
.element {
    animation-name: your-animation-name;

    /* 或者使用动画速记属性 */
    animation: your-animation-name 1s ...
}

在大括号内，定义关键帧或路径点，这些关键帧或路径点在动画期间的某些点上指定要设置动画的属性的值。这允许您在动画序列中控制中间步骤。例如，一个简单的动画@keyframe可能如下所示：

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    100% {
        background-color: blue;
    }
}

0%”和“100%”是关键帧选择器，每个都定义了关键帧规则。关键帧规则的关键帧声明块由属性和值组成。

还可以使用选择器关键字from和to，而不是分别使用0%和100%，因为它们是等价的。

@keyframes change-bg-color {
    from {
        background-color: red;
    }
    to {
        background-color: blue;
    }
}

关键帧选择器由一个或多个逗号分隔的百分比值或from和to关键字组成。注意，百分比单位说明符必须用于百分比值。因此，' 0 '是一个无效的关键帧选择器。

注意：为了获得浏览器的最佳支持，请始终指定0％和100％选择器。

示例1：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<style>
		@import url(http://fonts.googleapis.com/css?family=Gentium+Basic:400,700,400italic,700italic);
		html,
		body {
			height: 100%;
		}
		
		body {
			background-color: #F5F5F5;
			color: #555;
			font-size: 1.1em;
			font-family: 'Gentium Basic', serif;
		}
		
		.container {
			margin: 20px auto;
			min-width: 320px;
			max-width: 500px;
			height: 100%;
			overflow: hidden;
		}
		
		.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 {
				-webkit-transform: rotate(0) translateX(0);
				transform: rotate(0) translateX(0);
				opacity: 1;
			}
			to {
				-webkit-transform: rotate(90deg) translateX(200px);
				transform: rotate(90deg) translateX(200px);
				opacity: 0;
			}
		}
		
		@keyframes fall {
			from {
				-webkit-transform: rotate(0) translateX(0);
				transform: rotate(0) translateX(0);
				opacity: 1;
			}
			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>

示例2：

<!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: 'Gentium Basic', 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>

OK，就这么多。

赏您的支持是我们创作的动力！