动画相关设置

1. 什么是过滤？
概念：就是指元素从一个状态变为另一个状态的过程。
2. 如何实现过渡？
通过transition 属性来指定，它的语法格式为：
transition: 过渡属性 持续时间 运动曲线 延迟时间;

3. 对于过渡而言，我们可以使用 transition 来简写，也可以把这个属性分开。
- transition-property：指定要用于过渡的属性名称，如：width、height、background、......
- transition-duration：过渡持续时间，单位是秒。
- transition-timing-function：过渡的的运行曲线，默认是 ease
- transition-delay：延迟执行时间，单位为秒

4. 使用
需求：当鼠标移到div上时，div变为圆形

5. 注意：添加过渡效果的代码需要放在你想要进行过渡的元素上。简单的说，就是希望那个元素有过渡效果就把代码加到那个元素上。

6. 如果希望元素的多个属性都具有过渡的效果，那么我们就可以把过渡属性的值设置为 all 即可。

7. 运动曲线有哪些？
- ease：默认值，逐渐慢下来
- linear：匀速运动
- ease-in：加速
- ease-out：减速
- ease-in-out：先加速后减速

想要有进度条相关的内容如下:

需要两个div一个父div一个子div，子在父内部。对父div设置好宽度边框线等基本元素在子div设置宽0%高度100%和transition：width 时间 方式在用hover设置好需要加载的100%参数就可以

>>>>>>
在CSS3中提交了元素转换的操作功能，通过使用 transform 来实现，可以实现元素的位移、旋转和缩放。
- 位移：transform: translate()
- 旋转：transform: rotate()
- 缩放：transform: scale()

1. 位移：使用 translate() 来进行指定，它需要通过 x坐标和 y坐标来确定移动的位置。
语法格式有：
transform: translate(x, y); // 在x坐标和 y坐标上移动
transform: translateX(n); // 只在x坐标上移动
transform: translateY(n); // 只在y坐标上移动

2. 使用示例

注意：
1. 当使用translate(x, y)时，x和y都可以指定正值或负值
如果x的值是正值，则往右移动，负值往左移动
如果y的值是正值，则往下移动，负值往上移动。
2. x和y轴的值要带单位，一般使用像素（px）

>>>>>>>
在CSS3中还提供了元素旋转的功能，通过使用 rotate() 来实现，进行旋转时需要指定旋转的角度。
而所使用的角度的单位是 deg
语法格式为：
transform: rotate(数字deg);

使用示例：把div 旋转45度

注意：默认情况下旋转是以元素的中心位置为旋转点来旋转的。如果想指定旋转的中心
点的位置，可以使用 transform-origin: x,y 来指定

>>>>>>>

缩放使用 transform: scale() 来实现，
语法格式为：
transform: scale(x, y)

它有以下几种书写方式：
- transform:scale(1,1) ：宽和高都放大一倍，相对于没有放大
- transform:scale(2,2) ：宽和高都放大了2倍
- transform:scale(2) ：只写一个参数，第二个参数则和第一个参数一样，相当于 scale(2,2)
- transform:scale(0.5, 0.5)：缩小

x和y的取值说明：
如果值为 1 表示不放大也不缩小
如果值大于 1 表示放大
如果值小于 1 表示缩小

x和y的值是原大小的位数。