css3动画用什么定制规则

109 阅读 0 评论 72 点赞

我是靠谱客的博主醉熏豌豆，最近开发中收集的这篇文章主要介绍css3动画用什么定制规则，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

@keyframes是CSS3的一种规则，可以用来定义CSS动画的一个周期的行为，可以创建简单的动画。

@keyframes规则里是由一组封装的CSS样式规则组成的，这些规则描述了属性值如何随时间变化。

@keyframes animation-name {keyframes-selector {css-styles;}}
登录后复制

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

然后，使用不同的CSS animation（动画）属性，可以控制动画的许多不同方面，包括动画迭代的次数，是否在开始和结束值之间交替，以及动画是否应该运行或暂停。动画也可以延迟其开始时间。

@keyframe规则由关键字“@keyframe”组成，后面接着是给出动画名称的标识符（将使用animation-name引用），随后是通过一组样式规则（用大括号分隔）。然后，通过使用标识符作为animation-name属性的值，将动画应用于元素。

语法：

/* 定义动画*/
@keyframes 动画名称{
    /* 样式规则*/
}

/* 将它应用于元素 */
.element {
    animation-name: 动画名称（在@keyframes中已经声明好的）;

    /* 或使用动画简写属性*/
    animation: 动画名称 1s ...
}
登录后复制

在大括号中，我们需要定义关键帧或航点，这些关键帧或航点指定在动画期间的特定点处正在动画化的属性的值。这允许我们控制动画序列中的中间步骤。

例如，一个简单动画的@keyframe可以是这样：

@keyframes change-bg-color {
    0% {
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    100%{
    	background-color: red;
    }
}
.demo{
	 -webkit-animation:change-bg-color 5s infinite;
         animation: change-bg-color 5s infinite;
}
登录后复制

'0％'、‘50%’、'100％'都是关键帧选择器，每个选择器定义一个关键帧规则。关键帧规则的关键帧声明块由属性和值组成。

上述动画类似于简单的过渡效果：背景颜色从动画开头的一个值（0％）开始变化，在中间达到一个值（50%），在动画结束时达到另一个值（100％）。“0％”、”50％”和“100％”关键帧选择器定义了希望动画属性更改值的航点或百分点。我们也可以使用选择器关键字 from，to而不是分别使用0％和100％，它们是等效的。

@keyframes change-bg-color {
   from{
        background-color: red;
    }
    50% {
        background-color: blue;
    }
    to{
    background-color: red;
    }
}
登录后复制

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

以下是具有关键帧选择器的动画示例，其中包括多个以逗号分隔的百分比值和/或关键字关键帧选择器from和to。

@keyframes bouncing {
    0%, 50%, 100% { /* 或者 from, 50%, to */
        top: 0;
    }
    25%, 75% {
        top: 100px;
    }
}
登录后复制

上面的@keyframes规则定义：元素的顶部偏移量在开始时，中途和动画结束时将等于零，并且它将四分之一和四分之三路径时等于100px; 这意味着元素在动画循环中上下移动了好几次。

css @keyframes指定动画规则示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style>
			div {
				width: 100px;
				height: 100px;
				background: red;
				position: relative;
				animation: mymove 5s infinite;
				-webkit-animation: mymove 5s infinite;
				/* Safari and Chrome */
			}

			@keyframes mymove {
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}

			@-webkit-keyframes mymove

			/* Safari and Chrome */
				{
				0% {
					top: 0px;
					left: 0px;
					background: red;
				}

				25% {
					top: 0px;
					left: 100px;
					background: blue;
				}

				50% {
					top: 100px;
					left: 100px;
					background: yellow;
				}

				75% {
					top: 100px;
					left: 0px;
					background: green;
				}

				100% {
					top: 0px;
					left: 0px;
					background: red;
				}
			}
		</style>
	</head>
	<body>

		<div></div>

	</body>
</html>
登录后复制