运用css样式实现动画效果

过度：transition

在规定时间内，把元素从元素1过度到元素2，展现出来
CSS属性：在一定时间内，从一个字变化到另一个值。
书写代码：
transition-property：属性 ；
transition-duration：过度时间；（秒s、毫秒ms）
缺点：
1，可能会改变布局。
2，只能从状态1到状态2
过度类型：文本、颜色（背景）、尺寸、透明度。
设置渐变函数：
transition-timing-function：linear；线性渐变
transition-timing-function：ease；平滑过渡
transition-timing-function：ease-in；由慢到快
transition-timing-function：ease-out；由快到慢
transition-timing-function：ease-in-out；由慢到快再到慢
设置过度延迟时间：
transition-delay：时间（秒s、毫秒ms）；

动画：animation

动画步骤：

1. 创建一个动画；
   格式：@keyframes 自定义名称
   例：@keyframes F65

2. 设置动画时间内样式;
   0%{
   …………………………
   }
   20%{
   …………………………
   }
   60%{
   …………………………
   }
   ，
   ，
   ，
   ，
   100%{
   …………………………
   }
   标注*： 20%为总时间的百分比时间，
   大括号{ }内为这个时间段内要变化的样式代码

3. 使用动画；
   动画名称：
   animation-name：动画名称；（如F65）
   动画的时间：
   animation-duration：时间；（秒s、毫秒ma）
   动画的函数：
   animation-timing-function：linear；线性
   动画的次数：
   animation-iteration-count：循环次数；（无限次数：infinite）

变形：transform

缩放：
transform：scale（）；（缩小：0-1、放大：1-max）

旋转：

transform：rotate（ 度数deg）；（正值顺时针，负值逆时针）
rotate（默认值：沿z轴旋转）
rotatex（沿x轴旋转）
rotatey（沿y轴旋转）

倾斜：

transform:skew（度数deg）

偏移量：

transform：translate（x，y）；正值向右负值向左，正值向下负值向上

多值添加（缩写）：

transform：变形方式（变形值）空格键变形方式（变形值）