前端学习：关键帧动画

最新推荐文章于 2024-04-12 17:09:49 发布

\xaaq|恩懒

最新推荐文章于 2024-04-12 17:09:49 发布

阅读量743

点赞数 3

分类专栏：笔记文章标签： css html5 前端 animation

本文链接：https://blog.csdn.net/wang_lil/article/details/118443990

版权

关键帧：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框架（其实没有也没啥大问题）
添加<link>标签引用css文件

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel

关注

专栏目录