CSS 过渡、变形和动画

过渡

为元素从一种样式转变为另一种样式时添加效果，例如渐显、渐弱、动画快慢等。

transition-property属性

• transition-property 属性用于指定应用过渡效果的CSS属性的名称。
• 基本语法格式：transition-property: none | all | property;
• 属性描述：

属性值	描述
none	没有属性会获得过渡效果
all	所有属性都将获得过渡效果
property	定义应用过渡效果的CSS属性名称，多个名称之间以逗号分隔

transition-duration属性

• transition-duration属性用于定义过渡效果花费的时间，默认值为0，常用单位是秒（s）或者毫秒（ms）
• 基本语法格式：transition-duration:time;

transition-timing-function属性

• transition-timing-function属性规定过渡效果的速度曲线，默认值为“ease“
• 基本语法格式：transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
• 属性描述：

属性值	描述
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)	定义用于加速或者减速的贝塞尔曲线的形状，它们的值在0~1之间

transition-delay属性

• transition-delay属性规定过渡效果何时开始，默认值为0，常用单位是秒（s）或者毫秒（ms）
• 基本语法格式：transition-delay:time;
• 正数:过渡动作会延迟触发。
• 负数：过渡动作会从该时间点开始，之前的动作被截断。

transition属性

• transition属性是一个复合属性，用于在一个属性中设置transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性。
• 基本语法格式：transition：property duration timing-function delay;
• 注意：1.顺序不能颠倒
  2.无论是单个属性还是简写属性，使用时都可以实现多个过渡效果
  3.如果使用transition简写属性设置多种过渡效果，需要为每个过渡属性集中指定所有的值，并且使用逗号进行分隔。

变形

• css3变形包括：平移，旋转，缩放，倾斜
• 基本语法格式：transform：none （不变形）| transform-functions（变形函数或变形函数列表）
• transform-functions函数

中心点

• 变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用transform-origin属性。
• 基本语法格式：transform-origin: x-axis y-axis z-axis;
• 属性参数：
  transform-origin属性包含三个参数，其默认值分别为50% 50% 0，各参数的具体含义

参数	描述
x-axis	定义视图被置于X轴的何处。可能的值有：left，center，right，length，%
y-axis	定义视图被置于Y轴的何处。可能的值有：top，center，bottom，length，%
z-axis	定义视图被置于Z轴的何处。可能的值有：length

平移

• transform:translate（x-value,y-value）;
• 说明：x-value指元素在水平方向上移动的距离，y-value指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值0。当值为负数时，表示反方向移动元素
• 示意图

缩放

• transform:scale(x-axis,y-axis);
• 说明：x-axis和y-axis参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是反转元素（如文字被反转），然后再缩放元素。如果第二个参数省略，则第二个参数等于第一个参数值。
• 示意图

倾斜

• transform:skew(x-angle,y-angle);
• 说明：参数x-angle和y-angle表示角度值，第一个参数表示相对于X轴进行倾斜，第二个参数表示相对于Y轴进行倾斜，如果省略了第二个参数，则取默认值0。
• 示意图

旋转

• transform:rotate(angle);
• 说明：参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。
• 示意图

动画

@keyframes animationname {
         keyframes-selector{css-styles;}
}

• animationname：表示当前动画的名称，它将作为引用时的唯一标识，因此不能为空。
• keyframes-selector：关键帧选择器，即指定当前关键帧要应用到整个动画过程中的位置，值可以是一个百分比、from或者to。其中，from和0%效果相同表示动画的开始，to和100%效果相同表示动画的结束。
• css-styles：定义执行到当前关键帧时对应的动画状态，由CSS样式属性进行定义，多个属性之间用分号分隔，不能为空。例如：

属性值	描述
animation-name	1.属性初始值为none，适用于所有块元素和行内元素。 2.keyframename参数用于规定需要绑定到选择器的keyframe的名称，如果值为none，则表示不应用任何动画，通常用于覆盖或者取消动画
animation-duration	属性初始值为0，适用于所有块元素和行内元素。time参数是以秒（s）或者毫秒（ms）为单位的时间，默认值为0，表示没有任何动画效果。当值为负数时，则被视为0。
animation-timing-function	用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果。包括linear、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)等常用属性值。
animation-delay	参数time用于定义动画开始前等待的时间，其单位是秒或者毫秒，默认属性值为0。animation-delay属性适用于所有的块元素和行内元素。
animation-iteration-count	属性初始值为1，适用于所有的块元素和行内元素。如果属性值为number，则用于定义播放动画的次数；如果是infinite，则指定动画循环播放。
animation-direction	属性初始值为normal，适用于所有的块元素和行内元素。该属性包括两个值，默认值normal表示动画每次都会正常显示。如果属性值是"alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等）逆向播放。
animation	animation属性是一个简写属性，用于综合设置以上六个动画属性。使用animation属性时必须指定animation-name和animation-duration属性，否则持续的时间为0，并且永远不会播放动画。