JavaScript CSS动画网页动画 CSS3 关键帧动画 Animation

在网页中使用 CSS3 的 Animation 动画

发布于 2017-12-24 20:30:48 字数 5885 浏览 2642 评论 0

CSS 动画使以动画过渡的 CSS 样式配置到另一个成为可能。动画由 2 个组件构成，描述的 CSS 动画的样式和一组指示的开始和结束状态的动画的样式，如以及作为可能的中间的关键帧沿途的航迹。

CSS 动画传统的脚本驱动的动画技术有三个关键的优势：

他们很容易使用简单的动画，您可以创建他们甚至无需了解 JavaScript。
动画运行良好，即使在系统负载适中。简单的动画可以在 JavaScript 中往往表现不佳（除非他们是很好的）。渲染引擎可以使用，跳帧和其他技术，以保持较高的性能尽可能顺利。
让浏览器控制的动画序列，允许浏览器优化的性能和效率，例如通过减少当前不可见的选项卡，在运行的动画的更新频率。

基本语法

要创建一个 CSS 动画序列，你的样式你想要的元素的动画与动画财产或其子属性。这可以让你配置的时机和持续时间的动画，以及动画序列的发展，应如何等细节。这并没有配置使用 @keyframes 定义，下面的使用关键帧动画序列中所描述的规则，这是做动画的实际外观。

animation-delay：动画延迟，配置的元件被加载的时间之间的延迟时间和动画序列的开头。
animation-direction：动画方向，配置与否动画应交替在每次运行方向通过序列或重置起点重演。
animation-duration：动画持续时间，配置动画应该采取的完成一个周期的时间长度。
animation-iteration-count：动画迭代计数，配置的数量的动画应该重复;你可以指定无限无限期重复动画。
animation-name：动画名称，指定的名称规则描述@关键帧动画的关键帧。
animation-play-state：动画播放状态，让您暂停和恢复的动画序列。
animation-timing-function：动画定时功能，配置动画的定时的，也就是说，通过关键帧的动画过渡，通过建立的加速度曲线。
animation-fill-mode：动画填充模式，配置采用的是什么样的价值观动画之前和之后执行。

定义使用关键帧动画序列

一旦你已经配置了动画的时间，你需要定义外观的动画。这是通过建立两个或多个关键帧，在规则中使用 @keyframes 。每一个关键帧描述动画元素应该如何在一个给定的时间呈现在动画序列。

由于定时的动画被定义在 CSS 样式配置动画，@keyframes 在它们发生在动画序列中，用百分比来指示时间。0% 表示动画序列的开始状态，而 100% 表示动画的最终状态。因为这两个时间如此重要，他们有特殊的别名：from 和 to 。两者都是可选的。如果未指定从 0% 或 100% 时，浏览器开始或完成的动画，使用计算出的值的所有属性。

您可以选择中间步骤，从起点到终点动画一路上包括额外的关键帧。

注：这里的例子不使用任何动画的 CSS 属性前缀。基于 WebKit 的浏览器和其他浏览器的旧版本可能需要前缀的活生生的实例。

制作文字滑过的浏览器窗口

这个简单的例子风格的 <h1> 元素，使文本在关闭浏览器窗口的右边缘滑动。

h1 {
	animation-duration: 3s;
	animation-name: slidein;
}

@keyframes slidein {
	from {
		margin-left: 100%;
		width: 300%
	}
	to {
		margin-left: 0%;
		width: 100%;
	}
}

这里的风格的 <h1> 元素指定动画应该需要 3 秒，执行从开始到结束，使用动画持续时间属性，@keyframes 定义的关键帧，关键帧动画序列的名称是名为的 slidein。

如果我们想要的任何自定义样式上的 <h1> 元素出现在浏览器不支持 CSS 动画，我们将在这里包括为好，然而在这种情况下，我们不希望任何自定义样式以外的动画效果。

在规则中使用 @keyframes 关键帧定义。在这种情况下，我们只有两个关键帧。第一次发生在 0%（使用别名）。在这里，我们配置元素的左边距是 100%（即在包含元素中的最右侧边缘），和元素的宽度为 300%（或包含元素的宽度3倍的）。这将导致动画的第一帧的头，在浏览器窗口的右边缘抽出。

第二个（也是最后一个）关键帧发生在 100%（使用别名）。左页边被设定为 0%，和元件的宽度设置为 100% 。这将导致标头以完成其动画内容区域的左边缘紧贴。

添加另一个关键帧

让我们添加另一个关键帧前面的例子中的动画。比方说我们希望标题的字体大小，增加它的动作从右到左了一会儿，然后回到其原来的大小减少。这很简单，只要加入此关键帧：

75% {
	font-size: 300%;
	margin-left: 25%;
	width: 150%;
}

这告诉浏览器，75% 的方式，通过动画序列的头应该有其左侧的 margin 为 25% 和 width 应该是 150% 。

使其重复

为了使动画重演，只需使用动画迭代计数物业多少次重复的动画。在这种情况下，让我们用无限的动画无限期地重复：

h1 {
	animation-duration: 3s;
	animation-name: slidein;
	animation-iteration-count: infinite;
}

使其来回移动

这使得它重复，但很奇怪，它跳回到开始每次开始动画。我们真正想要的是移动在屏幕上来回。这很容易通过设置动画方向交替：

h1 {
	animation-duration: 3s;
	animation-name: slidein;
	animation-iteration-count: infinite;
	animation-direction: alternate;
}

使用动画事件

你可以得到额外的控制动画，以及他们有用的信息，通过利用动画事件。这些事件表示的 AnimationEvent 对象，可用于检测在动画开始时完成，并开始一个新的迭代。每个事件包括发生的时间，在它的名称，以及触发事件的动画。

每个动画事件发生时输出一些信息，我们将修改滑动文本的例子，所以我们可以看看他们是如何工作的。

添加动画事件侦听器

我们将使用 JavaScript 代码来监听所有三个可能的动画事件。设置 setup() 函数配置我们的事件侦听器，我们把它称为是第一次加载文档时，以设置的东西。

function setup() {
	var e = document.getElementById("watchme");
	e.addEventListener("animationstart", listener, false);
	e.addEventListener("animationend", listener, false);
	e.addEventListener("animationiteration", listener, false);

	var e = document.getElementById("watchme");
	e.className = "slidein";
}

这是非常标准的代码，你可以得到它是如何工作的文档中为 element.addEventListener() 的详细信息。setup() 函数在这里的最后一件事不设置类元素我们会动画 slideIn 我们这样做是为了启动动画。

只要动画开始 Animationstart 事件就会被触发，并在我们的例子中，这种情况发生之前，我们的代码运行。因此我们将开始自己的动画设置类的元素的事实后，被动画的风格。

接收的事件

的事件被传递到的 listener() 函数，该函数如下所示。

function listener(e) {
	var l = document.createElement("li");
	switch(e.type) {
		case "animationstart":
			l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
		break;
		case "animationend":
			l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
		break;
		case "animationiteration":
			l.innerHTML = "New loop started at time " + e.elapsedTime;
		break;
	}
	document.getElementById("output").appendChild(l);
}

这个代码，也很简单。它只是看起来 event.type 确定哪种类型的动画事件发生，然后添加适当注意的 <ul>（无序列表），我们正在使用记录这些事件。

输出结果看起来像这样：

开始：经过时间为0
新的循环开始时间：3.01200008392334
新的循环开始时间：6.00600004196167
结束：经过时间9.234000205993652

请注意，该时间已经是非常接近的，但不完全正确，预期动画被配置时建立的定时。还要注意的是最后一次迭代后的动画，不发送的 animationiteration 事件，相反 animationend 的事件发送。

HTML 结构

只是为了完整性，这里的 HTML 显示页面内容，包括列表、脚本将接收到的事件的相关信息：

<body onload="setup()">
	<h1 id="watchme">Watch me move</h1>
	<p>This example shows how to use CSS animations to make <code>H1</code> elements
	move across the page.</p>
	<p>In addition, we output some text each time an animation event fires, so you can see them in action.</p>
	<ul id="output">
	</ul>
</body>

分享到QQ

分享到微博