盘点web前端动画技术,css动画效果是通过什么实现的?

网页架构(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% 表示动画%0时背景是红色原地不动。100% 表示动画在100%时再次改变红色相对左移200px。代码运行后的效果是红色方块在浏览器左上方不断左右移动。

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180814A0VAXE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券