动画

动画
简单动画通常称为 过渡：transition（css属性 在一定时间内 从一个值变化到另一个值）
支持过渡效果的属性：颜色 尺寸 透明度类
transition：
transition-property： 指定CSS属性的name，transition效果
transition-duration：transition效果需要指定多少秒或毫秒才能完成
transition-timing-function：指定transition效果的转速曲线

linear
规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。

ease
规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。

ease-in
规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。

ease-out
规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。

ease-in-out
规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n)
在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

   transition-delay（延迟） ：属性指定何时将开始切换效果。

transition-delay值是指以秒为单位（S）或毫秒（ms）
旋转：transform
transform:rotate(90deg）

div:hover{
            /* 旋转 
            取值：角度
            角度可以是正值（顺时针） 也可以是负值（逆时针）（改变的为旋转方向）*/
            /* transform: rotate(45deg); */
            /* 默认为Z轴 */
            /* transform: rotateZ(45deg); */
            /* 轴线为Y轴进行旋转 */
            /* transform: rotateY(45deg); */
            /* 轴线为x轴进行旋转 */
            transform: rotateX(360deg);
        }

transform: 变形 scale缩放比例
取值为1 不变（不会影响周围的标签 但会覆盖）
小于1 为缩小
大于1 为放大

 div:hover{
        /* height: 150px ;
            width: 150px; */
            /* transform:  变形  scale缩放比例  取值为1 不变
            小于1 为缩小
            大于1 为放大 */
            background-color: red;
            /* 取值小于1为缩小 */
            transform: scale(0.5);
            /* 取值大于1为放大 */
            transform: scale(1.5);
        }

倾斜： 有X轴Y轴的倾斜
transform： skew（45deg，0）括号里前为X轴后为Y轴

div:hover{
            /* 倾斜 
            取值：角度
            角度可以是正值 也可以是负值（倾斜方向）*/
            transform: skew(-45deg);
        }

设置旋转的中心点 transform-origin（定义原点）
默认值是当前元素的中心点
书写格式：
transform-origin:X轴偏移量 Y轴偏移量

复杂动画：

动画播放效果 将动画创建写好后使用animation进行设置，需要哪个进行动画效应就在哪个元素后面进行
animation: name 5s linear infinite;
名字 时间 匀速 无限循环 ， 后两个可不写
创建动画：
书写格式：@keyframes 自定义动画名称

@keyframes slider（自定义名称）{
0%,23%{opacity: 1}
33%,90%{opacity: 0}
to{opacity: 1}
}                 方向的取值一直以开始时的圆点来定位

如果起始位置相同与结束位置相同，则可以省略结束位置的设置

animation: 动画名称 动画时长 动画次数（数字/无限循环infinite）