动画

2D变形，旋转，平移，缩放
transform变形样式:
rotate(xxx)旋转变形，值是旋转角度正值顺时针，负值逆时针
rotateY()，y轴旋转
rotateX()，x轴旋转
rotateZ()，z轴旋转

translate(xxx,xxx)平移变形，相对于标签原本的位置移动
translateX()，x轴平移长度
translateY()，y轴平移长度

scale(xxx,xxx)一个值表示宽高等比例缩放，默认1原始大小，大于1就是放大，小于1就是缩小
两个值是（宽缩放比例，高缩放比例）

多种变形效果可以同时使用，transform: scale(xxx,xxx) rotate(xxx) translate(xxx,xxx);

transform-origin:~~;变形原点，锚点，中心点默认值

过渡动画

css样式发生变化时，默认直接变化，没有过渡的效果

过渡效果

transition-property:all;表示哪些样式可以参与过渡效果，默认为all所有样式
transition-duration:~s;过渡动画持续的时间
transition-timing-function:ease先快后慢 ，linear匀速，ease-in先慢后快，ease-out先快后慢，ease-in-out(默认值)先加速后减速开始慢中间快结束慢
transition-delay:~s;延迟执行过渡效果
transition:all ~s ease-out;复合样式

关键帧动画
animation-duration:~s;动画时间
animation-name:xxx;要执行的动画名称（自定义）
animation-iteration-count动画重复的次数:infinte无限循环;
animation-timing-function动画速率:linear匀速;
animation-direction动画方向:reverse相反;
编写动画的过程

@keyframes xxx(动画名称){
	动画过程
	动画开始之前的状态：
	from{
	样式...
	}
	动画结束时的状态：
	to{
	样式...
	}
}

animation复合样式:动画名称，持续时间，速率，重复次数
也可以将总共的动画时间按照百分比进行分配

第三方动画库
先引入第三方动画库css文件
第一种，直给标签添加class，使用第三方动画库中的动画?

特定条件下，通过添加css使用animate.css中的动画?

鼠标hover控制子标签
鼠标进入xxx打标签，控制子标签样式

xxx:hover xxx{
    display: block;
}