目录
CSS3入门
前言
准备工作
过渡属性
transition-property
transition-duration
transition-timing-function
transition-delay
帧动画
@keyframes
animation
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
预告和回顾
后话
CSS3入门
前言
本系列博客主要介绍CSS有关知识点，当前章节讲述CSS3相关内容。
本期主要内容为：
- CSS3过渡属性
- CSS3帧动画
部分内容仅代表个人观点，仅供参考，希望能帮助到您。
准备工作
软件：【参考版本】Visual Studio Code
插件（扩展包）：Open in browser, Live Preview, Live Server
浏览器版本：Chrome
系统版本： Win10/11/其他非Windows版本
*我的电脑是Win10的版本，仅供参考*
过渡属性
在CSS3以前，元素之间的样式过渡（从一个样式过渡到另一个样式）只能使用js实现。而现在，利用新增的transition属性就可以完成一些过渡的效果。
该属性按顺序依次简写下面几个属性值（部分）：
css">transition-property transition-duration transition-timing-function transition-delaytransition-property
用于设置需要设置过渡的属性，填写all则对应所有属性。
transition-duration
用于设置过渡需要的时间，默认0s。
transition-timing-function
用于设置过渡效果的时间曲线，常见的曲线如下：
| 时间曲线名 | 效果 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果。 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果。 |
| ease-in | 规定以慢速开始的过渡效果。 |
| ease-out | 规定以慢速结束的过渡效果。 |
| ease-in-out | 规定以慢速开始和结束的过渡效果。 |
transition-delay
用于设置延迟开始的时间，默认为0s。
帧动画
CSS3通过创建帧动画，取代网页中的动图，flash动画以及js实现的部分效果。
@keyframes
帧动画的CSS代码如下：
css">@keyframes name{0% {}n% {}100% {}}其中name为帧动画的名称，n为0~100之间的值。
通过设置帧动画时间和n%，可以设置元素在某一时刻（帧）的效果。
animation
该属性用于调用动画。该属性依次调用以下属性：
css">animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-stateanimation-name
用于设置帧动画的名称，对应之前@keyframe中的动画名称，可以设置为none表示没有动画。
animation-duration
用于设置动画持续的时间，单位为s或者ms，类似transition。
animation-timing-function
规定动画的速度曲线，类似transition。
animation-delay
用于设置动画延迟开始的时间。
animation-iteration-count
用于设置动画播放的次数，默认为1。可以设置infinite以无限播放。
animation-direction
用于设置动画是否在下一周期逆向地播放。默认值为normal，可以设置reserve以在结束之后反向播放。
animation-fill-mode
用于设置当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。
该属性的值如下：
- none 默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
- forwards 在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
- backwards 动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
- both 动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。
animation-play-state
用于设置动画是否播放。默认值为running，即播放，设置paused以让动画暂停。可以配合js或者hover等伪类使用。
预告和回顾
对网页布局和制作感兴趣的朋友，可以看下面的CSS专栏，里面有很多讲解详尽的案例，当前为第九期：
专栏 | CSS入门
http://t.csdnimg.cn/4bvCJ当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏。
后话
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——已经缺氧的【H2O2】
