在页面制作中经常会用到动画效果，就是让元素动起来的效果，我直接将所有能让元素动起来的效果写在这里，供参考使用
一、animation动画
animation 属性是一个简写属性，用于设置六个动画属性：
- animation-name (动画名称，即在@keyfrom 后面设置的动画名)
- animation-duration
- 默认是 0
- 动画时长，完成动画一共花费的时长
- animation-timing-function
- 默认为ease
- 规定动画的速度曲线
- 常用linear/ease/ease-in/ease-out/ease-in-out/cubic-bezier(n,n,n,n)
- n为0 到 1的值
- animation-delay（定义动画开始前等待的时间）
- 默认为0
- animation-iteration-count（规定动画被播放的次数，infinite指的是无限循环）
- 默认为1
- animation-direction（规定动画是否在下一周期逆向地播放）
- 默认normal
- alternate指的是动画可以轮流反向播放
animate连写的时候，至少有两个属性值动画才能生效，一是动画名animation-name，二是动画完成所需要的时间animation-duration~
animation: name duration timing-function delay iteration-count direction;
例如：
animation: animate_aaa 1s ease 0s infinite alternate;
@keyframes animate_aaa{from{width: 100%;height: 100%;border-color: #ff8f03;}to{width: 200%;height: 300%;border-color: #ffd769;}
}
二、transition动画
transition属性是用来过渡的
transition在设置transition-duration属性的情况下，会产生过渡效果。
transition 的过渡属性与意义
- transition-property ： 过渡效果的CSS 属性名称，如：width等，还可以是all
- transition-duration ： 过渡效果所用的时间
- transition-timing-function ：过渡效果的速度曲线
- transition-delay ：过渡效果的延迟时间
连写：transition: property duration timing-function delay;
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
所以，transform属性只对元素进行变换，不会产生过渡效果。
transform要配合transition来使用：transition: transform 0.8s;
- 移动 translate，参数为距离的数值，包含三种，X轴方向移动，y轴方向移动，x和y轴方向同时移动
- translate(X)
- translate(Y)
- translate(X,Y)
- 旋转rotate，参数为角度
- rotate(20deg)
- rotate3d(x,y,z,angle)
- rotateX(angle)
- rotateY(angle)
- rotateZ(angle)
- Scale缩放
- scale(1) 参数小于1为缩小，大于1为放大
- 倾斜skew(angle)
- perspective(n) 为 3D 转换元素定义透视视图
什么时候用transition，什么时候用animation
虽然在实际问题中自然而然就会选择合适的一种，但是我们还是会纠结到底什么时候该用哪个!
我在后来做了很多动画的案例
在这总结出自己的看法
- 一般，固定路线的动画用animation来做，因为@keyfrom是写死的动画路线
- 而transition是在改变中使用的，比如为transform的参数值做变量处理
你只要记住这两点就够了，希望各位攻克所有难题，工作顺利~~