CSS3 动画

---

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

---

✍CSS3 动画

💎1 什么是帧动画

在 CSS3 出现之前，动画都是通过 JavaScript 动态的改变元素的样式属性来完成了，这种方式虽然能够实现动画，但是在性能上存在一些问题。CSS3 的出现，让动画变得更加容易，性能也更加好。

animation比较类似于 flash 中的逐帧动画，逐帧动画就像电影的播放一样，表现非常细腻并且有非常大的灵活性。然而transition只是指定了开始和结束态，整个动画的过程也是由特定的函数控制。学习过 flash 的同学知道，这种逐帧动画是由关键帧组成，很多个关键帧连续的播放就组成了动画，在 CSS3 中是由属性keyframes来完成逐帧动画的。

💎2 定义关键帧

通过 @keyframes 设置自定义名称的动画关键帧，在动画关键节点设置数值：

• AnimationName：动画名称，开发人员自己命名
• percentage：为百分比值，可以添加多个百分比值
• properties：样式声明，例如：color、left、width等等

@keyframes animationName {
  from {
    properties: value;
  }
  percentage {
    properties: value;
  }
  to {
    properties: value;
  }
}
/* or */
@keyframes animationName {
  0% {
    properties: value;
  }
  percentage {
    properties: value;
  }
  100% {
    properties: value;
  }
}

💎3 animation

语法：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• name：指定要绑定到选择器的关键帧的名称
• duration：动画指定需要多少秒或毫秒完成
• timing-function：设置动画将如何完成一个周期
• delay：设置动画在启动前的延迟间隔
• iteration-count：定义动画的播放次数
• direction：指定是否应该轮流反向播放动画
• fill-mode：规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式
• play-state：指定动画是否正在运行或已暂停

🌹3.1 animation-name

它是用来设置动画的名称，可以同时赋值多个动画名称，用,隔开：

animation-name: none | IDENT[, none | IDENT] *;
animation-name: mymove;

默认值：none， 指定有没有动画

🌹3.2 animation-duration

它是用来设置动画的持续时间，单位为s，默认值为0：

animation-duration: <time>[, <time>] *;
animation-duration: 2s;

🌹3.3 animation-timing-function

animation-timing-function 指定动画将如何完成一个周期：

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) | step-start | step-end;

ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) 和 transition-timing-function 类似：

• ease：动画缓慢开始，接着加速，最后减慢，默认值
• linear：动画从头到尾的速度是相同的
• ease-in：以低速开始
• ease-out：以低速结束
• ease-in-out：动画以低速开始和结束

🌹3.4 animation-delay

它是来设置动画的开始时间，单位是s或者ms，默认值为 0：

animation-delay: <time>[, <time>] *;
animation-delay: 2s;

🌹3.5 animation-direction

它是来设置动画播放的方向，默认值为normal表示向前播放，alternate代表动画播放在第偶数次向前播放，第奇数次向反方向播放：

animation-direction: normal|reverse|alternate|alternate-reverse;

取值：

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5…）正向播放，在偶数次（2、4、6…）反向播放。
alternate-reverse	动画在奇数次（1、3、5…）反向播放，在偶数次（2、4、6…）正向播放。

🌹3.6 animation-iteration-count

它是来设置动画循环的次数，默认为1，infinite为无限次数的循环：

animation-iteration-count: 3;
animation-iteration-count: infinite;

🌹3.7 animation-play-state

它主要是来控制动画的播放状态：running代表播放，而paused代表停止播放，running为默认值：

animation-play-state: paused|running;

取值：

值	描述
paused	指定暂停动画
running	指定正在运行的动画

这个属性一般是单独使用。

🌹3.8 animation-fill-mode

作用：

• forwards：大白话：保留动画的最终效果(to)
• backwards：大白话：采用第一帧（from）作为盒子的效果。如果设置方向为reverse，那么采用最后一帧（to）作为盒子的效果。
• both：大白话：既采用第一帧（from）作为盒子的效果，保留动画的最终效果(to)

animation-fill-mode: none|forwards|backwards|both;

取值：

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 “normal” 或 “alternate” 时）或 to 关键帧中的值（当 animation-direction 为 “reverse” 或 “alternate-reverse” 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

💎4 动画库

动画库链接：animate.css
了解：

• 基础用法，很多时候会结合JS来实现动态效果
• 阅读源码

---

个人主页：学习前端的小z
个人专栏：HTML5和CSS3悦读
本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结，欢迎大家在评论区交流讨论！

---

✍HTML、CSS规范

规范是更好编写代码，规范不是强制要求，而是一种建议，初学的时候应该尽可能采用这些建议。如果特别熟练了，那么就根据自己的习惯来编写即可。

💎1 命名规范

1、命名需要是具备语义性的单词，不能用数字、拼音，或者使用数字开头：

正确示范 ： wrap description title  content
错误示范 :  aaaa a1 $we 4tdds

2、命名需要多个单词连接的情况下，标记语言中可以使用 _ - 进行连接 不能直接单词拼接。

注意：书写风格必须统一，不容许出现 _ - 一起使用的情况。更推荐使用 - 这样更清晰。

正确示范 :  header-nav content-left slide-bar
错误示范 :  headernav slideBar ContentLeft

3、命名需要进行适当的缩写，单词连接层级不要超过4层

正确示范 :  head-tit-ico
错误示范 :  header-title-left-logo-icon

4、不容许通过1、2、3等序号进行命名

正确示范: content-product
错误示范: content1、content2

5、避免class与ID重名

6、id用于识别模块或一级结构区域且必须唯一。定义了ID名称，尽量不要改动

常用命名

头	header	内容	content	尾	footer	导航	nav
子导航	subnav	栏目	column	主体	main	新闻	news
版权	copyright	文章列表	list	加入	joinus	合作伙伴	partner
标志	logo	侧栏	sidebar	横幅	banner	状态	status
菜单	menu	子菜单	submenu	滚劢	scroll	搜索	search
标签页	tab	提示信息	msg	小技巧	tips	标题	title
指南	guild	服务	service	热点	hot	下载	download
注册	regsiter	登录条	loginbar	按钮	btn	投票	vote
注释	note	友情链接	friend-link	外套	wrap	面包屑	bread-crumb
当前的	current	购物车	shop	图标	icon	文本	txt
容器	container	wrap

💎2 CSS 书写

🌹2.1 空格规范

【强制】 选择器 与 { 之间必须包含空格。

示例： .selector { }

【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。

示例：color: red;

🌹2.2 选择器规范

【建议】 选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

/* 规范 */
#username input {}
.comment .avatar {}

/* 不规范 */
.page .header .login #username input {}
.comment div * {}

🌹2.3 属性规范

【强制】 属性定义必须另起一行。

/* 规范 */
.selector {
    margin: 0;
    padding: 0;
}

/* 不规范 */
.selector { margin: 0; padding: 0; }

【强制】 属性定义后必须以分号结尾。

/* 规范 */
.selector {
    margin: 0;
}

/* 不规范 */
.selector {
    margin: 0
}

🌹2.4 大小写规定

css虽然不区分大小写 按照惯例和规定 : 所有css文件中的代码都小写,

/* 规范 */
#username input {
text-align: center;
}


/* 不规范 */
#username input {
TEXT-ALIGN: center;
}

🌹2.5 CSS3 兼容前缀

如果使用 CSS3 的属性，如果有必要加入浏览器前缀，则按照

-webkit- / -moz- / -ms- / -o-的顺序进行添加，标准属性写在最后，并且属性名称要对齐，例如：

div.animation-demo { 
    -webkit-animation: mymove 5s infinite; 
    -moz-animation: mymove 5s infinite; 
    -o-animation: mymove 5s infinite; 
    animation: mymove 5s infinite;
}

🌹2.6 CSS书写顺序

良好的CSS书写顺序是前端工程师需要遵守并维护的重要规范

1. 位置属性 display position float overflow z-index list-style clear等可以决定元素渲染位置或层级 以及能够影响其他元素渲染位置或层级的属性
2. 自身属性  width height margin padding border background line-height 等可以影响盒子自身展示的属性
3. 文本属性  color font- text- word- 等作用于文本的样式属性
4. 其他与新增属性 cursor zoom transform box-shadow 等新增属性

原理：

1. 浏览器解读HTML是从上之下单行解析, 如果没有良好的书写顺序, 例如先解析了 width height 那预渲染的时候 就会从默认位置 (当前文档流左上角) 进行渲染
2. 如果后续解析到了 位置属性 浏览器需要擦除之前 渲染好的模型 重新根据 渲染基准点(左上角)位置 和层级 进行重绘, 这样导致浏览器会重复解析同一个元素 造成不必要的重绘
3. 良好的书写顺序是 BAT等一线互联网企业都遵守的CSS书写规范 他可以帮助团队成员协作的时候 迅速排查和后期维护

/*正确示范*/
.selector {
    float: left;
    width: 150px;
    font-size: 12px;
}

/*错误示范*/
.selector {
    font-size: 12px;
    width: 150px;
    float: left;
}

🌹2.7 链接伪类顺序

链接的样式请严格按照：a:link-> a:visited-> a:hover-> a:active（LV包hao）的顺序添加

🌹2.8 CSS复合写法与单例写法

如果对目标样式的子属性需求小于3时，进行单例写法，避免复合写法造成的computed浪费

当子属性需求大于等于3时，进行复合式写法，避免单例写法过于冗余和字节浪费

/*正确示范*/
div {
background-color: red;
    margin: 20px;
}

/*错误示范*/
.selector {
background: red;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    margin-right: 20px;
}

🌹2.9 布局方式选择

文档流 > 盒子模型距离调整(margin+padding) > 浮动 > 定位

定位元素会脱标并且独立新开文档流层级，高度依赖定位会导致浏览器压力大，并且在后期维护中因为定位元素并不能跟随文档流进行流动，所以维护成本高。

实际开发中 能用文档流+盒子模型处理的布局 轻易不使用浮动 能用浮动处理的布局 不要使用定位 。 只有在最关键的时刻才使用定位进行布局调整。

🌹2.10 定位z-index取值范围

合理规划z-index的取值范围 避免和他人组件层级冲突，需要组内协商

公共头部导航	1999 - 2100
banner与二维码等弹出层	999 - 1900
页面公共底部	1999 - 2100
页面公共组件	-1 - 999

原文地址：https://blog.csdn.net/2201_75539691/article/details/137800568

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！