关于CSS的动画

什么是过渡，变形？

css 过渡是元素从一种样式逐渐改变为另一种的效果。

transition： 过渡

• transition属性实现简单的动画效果
• transition属性是一个复合属性，主要包含property、duration、timing-function、delay等子属性

transition子属性

• property：规定应用过渡的CSS属性的名称
• duration：定义过渡效果花费的时间
• timing-function：规定过渡效果的时间曲线

取值	特性
linear	规定以相同速度开始至结束的过渡效果
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果
ease-in	规定以慢速开始的过渡效果
ease-out	规定以慢速结束的过渡效果
ease-in-out	规定以慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值

• delay：规定开始之前需要等待的时间

transform：变形

transform属性允许对元素应用2D转换，常见的2D转换：

        倾斜（skew）、移动（translate）、旋转（rotate）、缩放（scale）

函数名	描述	参数说明
rotate(deg)	旋转元素	可以设置旋转轴  X Y Z 默认是绕着中心点和Z轴进行旋转
skew(X-deg,Y-keg)	倾斜元素	单位：deg
skewX(deg)	沿着X轴倾斜
skewY(deg)	沿着Y轴倾斜
scale(x,y)	缩放元素 改变元素的高度和宽度	代表缩放比例，取值包含正数、负数和小数
scaleX	改变元素的宽度
scaleY	改变元素的高度
translate(x,y)	移动元素对象 基于X和Y坐标重新定位元素	元素移动的数值，X代表左右方向，Y代表上下方向。向左和向上使用负数，向右和向下使用正数。 单位：deg、%（设置自身的百分比）
translateX(x)	沿着X轴移动元素
translateY(y)	沿着Y轴移动元素

关键帧

关键帧表示动画过程中的一个状态，多个关键帧就可以形成一组绚丽的动画。

@keyframes animationname{
	keyframes-selector{css-style}
}

• animationname是当前动画的名称
• keyframes-selector:是关键帧选择器
• css-style:当前关键帧的动画状态

animation属性：

用于设置动画的名称、时间、时间曲线等属性，它是一个复合属性。

animation子属性

• animation-name：规定@keyframes动画的名称
• animation-duration：规定动画完成一个周期所花费的时间
• animation-timing-function：规定过渡效果的时间曲线
• animation-delay：规定开始之前需要等待的时间
• animation-iteration-count：规定动画播放的次数