服务器之家
您的位置： 首页 编程语言 css

盘点web前端动画技术，css动画是通过什么实现的？（css动画原理）

100人浏览   2024-12-16 10:46:40

网页架构（html）、网页样式（css）、JavaScript之前的关系

众所周知网页前端由网页架构（html）、网页样式（css）、网页互动（JavaScript）三部分组成，对于新手来说理解他们之前的关系有些困难，我们可以把网页前端比成一座房子，html代表房子的基础和架构、css表示房子的装修风格是中式、欧式还是其他风格的，JavaScript代表这个房子中能够产生交互的东西，比如门和窗户它们都有打开和关闭的动作。理解了它们三者之间的关系，再往下理解学习其他关于网站的内容，就不会出现“知其然不知其所以然”的情况。应后台粉丝留言，今天主要给大家讲解一下css中动画，如果漏掉内容望大家补充！

web前端中的动画分类

再讲css动画前，为什么要说明html、css、JavaScript之间的关系，是因为网站前台动画三者类型的动画，它们分别是css动画、FLASH动画（gif动态图）、JavaScript动画。这三种动画是网页前端工程师经常使用到的。css动画可以对动画优化，只能做简单的动画，有很多限制（不能中间反转动画、不能控制时间灵活度等）。FLASH动画、gif图需要浏览器插件支持，客户浏览器没有安装插件，动画播放就会出现问题。JavaScript脚本动画能力很强，可以完成很多的动画动作，缺点就是学习难度要高些。如果做的是pc端动画建议使用JavaScript，是移动端建议使用css+html5。

css中的动画

动画是在css中表现就是元素从一种样式逐渐变化为另一种样式的效果（对的动画定义不清楚，先查一下资料。），css中动画通过animation和@keyframes 规则实现的。@keyframes 规则定义动画每一帧是什么（对帧不了解可以查一下概念），而animation定义每一帧的动作执行。

animation属性

animation有8个属性如下图所示：

@keyframes规则

@keyframes规则规定发生的时间，或过关键词 "from" 和 "to"，等价于 0% （开始时间）和 100%（结束时间）。建议使用百分比定义选择器。

上面animation-name: myfirst;规定了动画规则是myfist，animation-duration: 5s;规定了动画持续5s，
animation-timing-function: linear;规定动画从头到尾速度是相同的。animation-delay: 2s;动画开始延时2s，
animation-iteration-count: infinite;规定动画无限次播放，animation-direction: alternate;规定动画轮流方向播放，animation-play-state: running;规定动画现在播放。

上面这段代码是@keyframes规则，0% {background:red; left:0px; top:0px;}表示动画%0时背景是红色原地不动。100% {background:red; left:200px; top:0px;}表示动画在100%时再次改变红色相对左移200px。代码运行后的效果是红色方块在浏览器左上方不断左右移动。

关于“css中的动画”先聊到这，每天学习一个知识点，每日寄语-“人们最害怕的是无常变化，要学习适应环境的变化和变化中另谋创新，并不是停留在变化的痛苦中。”

相关推荐