前端学习：关键帧动画

最新推荐文章于 2023-07-25 17:13:39 发布

尤翔宇

最新推荐文章于 2023-07-25 17:13:39 发布

阅读量715

点赞数

文章标签：前端学习 css

原文链接：http://t.csdn.cn/HM0rV

版权

关键帧动画

关键帧

关键帧：keyframes

关键帧动画可以在不使用JavaScript的情况下，仅仅使用css渲染实现web网页的动态显示。本篇文章主要讲解一丢丢关键帧的基础知识。

首先需要引用关键帧，我们可以在css中使用@方法来引用：

@keyframes name{}

关键帧的名称可以修改

在引用关键帧后，就可以在{}中设置各个关键帧的位置信息，将想要实现的动画进行划分，得到几一个关键位置的坐标信息，以此作为关键帧：

@keyframes move{
	0%
	{
		left: 0;
		top: 0;
	}
	100%{
	left: 200;
	top: 0;
	}
}

如上代码，我设置了两个关键帧，分别是0%和100%，也就是起点和终点，在两者中间可以按顺序添加关键帧；这个关键帧动画就能够实现从（0,0）到（200,0）两点间的移动。

在设置好关键帧后，我们需要把它引用到css中，使其能够起到渲染的作用。接下来我么一步一步来：

实例
html框架：

第一步便是做好html框架（其实没有也没啥大问题）
添加<link>标签引用css文件

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="learn1.css">
	<title>关键帧动画</title>
</head>

在<head>标签中引用了css文件后，在主体中添加<div>标签，并且为它添加类名：

<body>
	<div class="demo"></div>
</body>

css渲染

html中的部分就只有这么多了，接下来便是css部分的渲染。

我们先对<div>标签的属性进行调整：

.demo{
	position: fixed;
	width: 100px;
	height: 100px;
	background-color: blue;
	left: 0;
	top: 0;
}

animation标签

在调整好<div>标签的基础属性后，使用animation: ;属性来使用我们先前设置好的关键帧；

animation: ;存在很多的可设置关键字，具体如下：

animation-timing-function: ;速度效率

可设置关键字：
easy（默认值）:慢 -> 快 -> 慢
linear:匀速
easy-in:慢速开始
easy-out:慢速结束
easy-in-out:开始结束慢，中间快

animation-delay: ; 动画的延迟时间，可以为负值，单位是秒（s）

animation-iteration-count: ; 动画执行的次数

可设置关键字：
infinite：无止尽的运动
n(数字)：设定重复次数

animation-direction: ; 动画的运动方向，是否做往返运动

可设置关键字：
normal 正常的0~100%运动
reverse 反向的运动
alternate 正常的往返运动
alternate-reverse 反向的往返运动

animation-fill-mode: ; 动画在静止时侯的样式

可设置关键字：
forwards 动画静止在最后一个关键帧的位置
backwards 动画的第一个关键帧立即作用
both 动画的第一个关键帧立即作用并且静止在最后一个关键帧的位置

transition: ;代表的是过渡动画，只关注css属性的变化，只要变化就会触发动画效果

animation: ;关键帧动画，设置了就会立即去执行，不关注子属性的顺序，但是动画执行时间和动画延迟时间的相对顺序不能够改变

总的来说是下面这种情况，但是animation: ;的属性顺序不能乱，特别是执行时间、延迟时间，顺序不能弄错了！

.demo{
	animation: ;
	/*运动位置   运动执行时间   运动速率   
	运动的等待时间   运动的次数   运动的方向   
	动画在静止时侯的样式;*/
}

代码部分

下面是一个简单的例子：

html部分：

<!-- html主体代码 -->
<html lang="en,zh">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<!-- 引用css文件 -->
	<link rel="stylesheet" type="text/css" href="learn1.css">
	<title>关键帧动画</title>
</head>
<body>
	<div class="demo"></div>
</body>
</html>

css部分

/* 文件名：'learn1.css' */
/*动画帧*/
/* css样式 */
.demo{
	position: fixed;
	width: 100px;
	height: 100px;
	background-color: blue;
	left: 0;
	top: 0;
	animation: move 5s 2s linear normal infinite;
	/* 运动时间为5s一轮；延迟2s；匀速运动；正方向运动；无限执行； */
}

@keyframes move{
	0%
	{
		left: 0;
		top: 0;
	}
	25%
	{
		left: 500px;
		top: 0;
	}
	50%
	{
		left: 500px;
		top: 500px;		
	}
	75%
	{
		left: 0;
		top: 500px;
	}
	100%
	{
		left: 0;
		top: 0;
	}
}