大家好，我是wawjf~~
抱歉，我已经咕咕了一周了，QAQ。
那周一的儿童节就不会更PR了。
对了，我给你预览一下。
我们准备进b站啦~ ~
其实我们已经有百度的百家号了，但是因为内容是一样的，没有改变，所以目前停止更新百度。接下来我们会在哔哩哔哩发布一个专栏(也就是一篇文章)，然后在暑假发布一个视频教程，我们在微信官方账号会同步更新。
然后我们会对全面,的内容进行修改，会变得更加详细，所以如果你想再学一遍，可以期待一下~
今天我们要讲的是CSS的2D动画~
没错，你没听错。不是变形，是动画！
今天我们来讲一个属性：过渡。
我们来谈谈transition的英文意思：
转场对应的是动画的特性，所以转场是动画的属性。
当然，这一期只谈2D动画，3D是下期还是下期
transition
其实动画说白了就是改变动画的一些CSS属性，比如长度、宽度、字符大小、字体等。而它们之间的过渡就是动画，这就是过渡的作用。
所以我们来详细说说过渡的四个属性：
过渡属性
指定过渡效果的CSS属性的名称。过渡持续时间
指定完成过渡效果所需的秒数或毫秒数。
style=”white-space: normal;”>transition-timing-function
transition-delay
我们来详细的讲一讲这几个属性：
1） transition-property
我们使用transiton这个属性的时候，这个东西的默认值为：all
all即所有的CSS属性
可填的参数就是你想变换的属性名称，比如weight（宽），font-size（字体），height（高）等等等等。
2）transition-duration
注意！在你使用transition这个属性的时候，这个东西是必！填！的！
这个属性比较好理解，意思就是你的动画持续的时间，单位为毫秒（ms）
注意：一般情况下，80%的编程语言，凡是有关时间的，一般计算单位都是用毫秒的
1000毫秒=1秒（千万不能忘记！）
默认值：0（不产生过渡效果，即没有动画）
3）transition-timing-function
这东西我要重点的讲解一下：
为什么呢？因为 速度曲线 这四个字是比较让人难懂的
首先，我们要知道什么叫做速度曲线
其实速度曲线的定义很简单：就是速度变化的曲线
比如速度先快，后慢，最后又变快，这样就形成了一种的速度曲线
速度曲线又有几种参数了，我先把他的组成给大家讲一下：
那就是三次贝塞尔曲线：cubic-bezier(x1,x2,y1,y2)
但是很复杂，我之后会专门出一期来讲一讲cubic-bezier
那怎么办呢？
没关系，还有几个简单的简写，详细如下：
| linear | 规定以相同速度开始至结束的过渡效果 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果 |
| ease-in | 规定以慢速开始的过渡效果 |
| ease-out | 规定以慢速结束的过渡效果 |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |
4） transition-delay
意思就是表示触发动画后延迟多久开始动画效果
这个不难，单位和duration一样，是毫秒
在实战之前，我们再来讲一个触发动画的方法：hover选择器
：hover选择器
是的，：hover选择器
因为大家还没学到JS的鼠标指针动画，所以目前比较好用的就是hover选择器了。
它用于选择鼠标指针浮动在其上的元素，并设置其样式：
一般写法为ID:hover
那么废话不说了，我们直接上代码：
<!DOCTYPE html><html><head><style>div{width:100px;height:100px;background:blue;transition:width 2s;}div:hover{width:300px;}</style></head><body><div></div></body></html>
效果如下：
本实例为：将一个100px的正方形的边长过渡为300px
好了，有问题可以在私信公众号询问哦~我们看到就会回复的~~
作者：
wawjf
（我爱微积分）
四五工作室副室长（嗯，我也是
）
四五议会 45-2（没想到我是45-2吧
）
喜欢研究理科类东西
08年出生，福建福州人，未来的█████
自学微积分，低调低调
本来想研究算法，结果在这边写稿屯图片
关注四五工作室，从零开始学WEB
如果想看到往期教程，点击下方菜单就好了啦~
HTML教程：输入HTML或者菜单点击；
CSS教程：输入CSS或者菜单点击；
JS教程：输入JS或者菜单点击；
每期一题：输入每期一题；
如果输入错误不会得到回复哦~
我们下期再见~
