css3-动画（animation）效果的实现-css教程-PHP中文网

首页

web前端

css教程

css3-动画（animation）效果的实现

青灯夜游

Sep 12, 2018 pm 06:05 PM

animation css3

本章给大家介绍css3-动画（animation）效果的实现，让大家了解一个简单的css3动画是如何实现的。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

css3-动画（animation）：

具有以下属性：

1、animation-name 自定义动画名称
2、animation-duration 动画指定需要多少秒或毫秒完成，默认值是0;
3、animation-timing-function 动画的时间曲线，linear 匀速， ease 先慢后快，结束前变慢。
4、animation-delay 动画在启动前的延迟间隔，默认是0
5、animation-iteration-count 动画的播放次数，默认是1
6、animation-direction 是否轮流反向播放动画
7、animation-play-state 动画是否正在运行或已暂停。值：paused 指定暂停动画； running 指定正在运行的动画，默认。

代码实例（以平移--translate为例说明动画的整个过程）：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.warp {
				height: 100px;
				width: 100px;
				border: 1px solid #eee;
				background-color: #21B4BB;
				animation-name: moves;
				animation-direction: alternate;
				animation-delay: 0.2s;
				animation-duration: 5s;
				animation-play-state: paused;
				animation-iteration-count: 3;
				/*以上可以简写成：*/
				animation: moves 5s linear 0.2s 3;
			}
			
			@keyframes moves {
				/*动画名称自定义*/
				10% {
					background-color: #21B4BB;
					/*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/
					transform: translate(100px, 0);
					-ms-transform: translate(100px, 0);
					/*IE 9*/
					-moz-transform: translate(100px, 0);
					/* Firefox */
					-webkit-transform: translate(100px, 0);
					/* Safari 和 Chrome */
					-o-transform: translate(100px, 0);
					/* Opera */
				}
				30% {
					background-color: #008000;
					/*时间点可以任意*/
					transform: translate(100px, 100px);
					-ms-transform: translate(100px, 100px);
					/*IE 9*/
					-moz-transform: translate(100px, 100px);
					/* Firefox */
					-webkit-transform: translate(100px, 100px);
					/* Safari 和 Chrome */
					-o-transform: translate(100px, 100px);
					/* Opera */
				}
				60% {
					background-color: #444444;
					/*时间点可以任意*/
					transform: translate(0, 100px);
					-ms-transform: translate(0, 100px);
					/*IE 9*/
					-moz-transform: translate(0, 100px);
					/* Firefox */
					-webkit-transform: translate(0, 100px);
					/* Safari 和 Chrome */
					-o-transform: translate(0, 100px);
					/* Opera */
				}
				100% {
					background-color: #70DBDB;
					/*时间点可以任意*/
					transform: translate(0, 0);
					-ms-transform: translate(0, 0);
					/*IE 9*/
					-moz-transform: translate(0, 0);
					/* Firefox */
					-webkit-transform: translate(0, 0);
					/* Safari 和 Chrome */
					-o-transform: translate(0, 0);
					/* Opera */
				}
			}
		</style>
	</head>

	<body>
		<div class="warp">

		</div>
	</body>

</html>

登录后复制

效果图：

css3-动画（animation）效果的实现

以上是css3-动画（animation）效果的实现的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7323

Java教程

1625

CakePHP 教程

1350

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

纯CSS3怎么实现波浪效果？（代码示例） Jun 28, 2022 pm 01:39 PM

纯CSS3怎么实现波浪效果？本篇文章就来给大家介绍一下使用 SVG 和 CSS 动画制作波浪效果的方法，希望对大家有所帮助！

如何加速Windows 11中的动画效果：2种方法解析 Apr 24, 2023 pm 04:55 PM

当微软推出Windows11时，它带来了许多变化。其中一项更改是增加了用户界面动画的数量。一些用户想要改变事物的出现方式，他们必须想办法去做。拥有动画让用户感觉更好、更友好。动画使用视觉效果使计算机看起来更具吸引力和响应能力。其中一些包括几秒钟或几分钟后的滑动菜单。计算机上有许多动画会影响PC性能、减慢速度并影响您的工作。在这种情况下，您必须关闭动画。本文将介绍用户可以提高其在PC上的动画速度的几种方法。您可以使用注册表编辑器或您运行的自定义文件来应用更改。如何提高Windows11动画的

如何使用CSS实现元素的旋转背景图动画效果 Nov 21, 2023 am 09:05 AM

如何使用CSS实现元素的旋转背景图动画效果背景图动画效果可以增加网页的视觉吸引力和用户体验。本文将介绍如何使用CSS实现元素的旋转背景图动画效果，并提供具体的代码示例。首先，我们需要准备一张背景图，可以是任何你喜欢的图片，例如一张太阳或者电风扇的图片。将该图片保存并命名为“bg.png”。接下来，创建一个HTML文件，并在文件中添加一个div元素，将其设置为