过渡、变形、动画

过渡

transition-property:用于指定应用过渡效果的css属性的名称，其过渡效果通常在用户将指针移动到元素上时发生。
菜鸟教程注解

transition-duration：用于定义过渡效果花费的时间，默认值为0，常用单位是秒或毫秒
菜鸟教程注解

transition-timing-function:用于规定过渡效果的速度曲线，默认值为ease。
菜鸟教程注解

transition-delay:用于规定过渡效果何时开始，默认值为0，常用单位是秒或者毫秒，transition-delay可以设置为正整数、负数、0.当设置为负数时，过渡动作会从该时间点开始，之前的动作被截断；当设置为正数时，过渡动作会延迟触发。
菜鸟教程注解

transition：是一个复合属性，用于在一个属性设置 transition-property、transition-duration、transition-timing-function、transition-delay四个过渡属性，其基本语法格式是
property、duration、timing-function、delay
W3school注解

变形

css3变形是一系列效果的集合，比如平移、旋转、缩放、倾斜，每个效果都被称为变形函数

2D转换

平移

translate重新定义元素的坐标，实现平移的效果。该函数包含两个参数值，分别用于定义x轴和y轴坐标，如果省略了第二个参数，则取默认值为0，当值为负数时，表示反方向移动元素

transform: translate(200px,200px);

缩放

scale用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例，元素尺寸的增加或减少，由定义x轴和y轴参数控制，参数值可以是正数、负数、小数，正数值表示基于给定的宽度和高度放大元素。负数值不会缩放元素，而是反转元素（例如文字被反转），然后再缩放元素

transform: scale(1.3);

倾斜

skew：能够让元素倾斜，该函数包含两个参数值，第一个参数表示相对于x轴进行倾斜，第二个表示相对于y轴进行倾斜，如果省略了第二个参数，则取默认值0。

transform: skew(7deg,7deg);

旋转

rotate：能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。角度为正数值，则按照顺时针进行旋转

transform: rotate(70deg);

更改变换的中心点

transform-origin: 通过transform属性可以实现元素的平移、缩放、倾斜、旋转等，这些变形操作都是以元素的中心店为基准进行的，如果要改变这个基准点，就用它

transform-origin:20% 40%;

菜鸟教程注解

CSS3：transform详解

3D转换

rotateX（）方法、rotateY（）方法

主要用于指定元素围绕X轴、Y轴旋转，参数用于定义旋转的角度

transform: rotateX(80deg);

其值为正数时，元素将围绕X轴顺时针旋转。为负，元素围绕X轴逆时针旋转
W3school注解
transform变形
菜鸟教程3D转换

动画

@keyframes用于创建动画，在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐变为新样式的动画效果。

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

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

animation-name: 用于定义要应用的动画名称，为@keyframes 动画规定名称
菜鸟教程注解

animation-duration：用于定义整个动画效果完成所需要的时间，以秒或毫秒计。初始值为0，适用于所有块元素和行内元素，时间默认值为0，表示没有任何动画效果，当值为负数时，则被视为0.
菜鸟教程注解

animation-timing-function:用来规定动画的速度曲线，可以定义使用哪种方式来执行动画效果，默认值为ease，适用于所有的块元素和行内元素
菜鸟教程注解

animation-delay:用于定义执行动画效果之前延迟的时间，time用于定义动画开始前等待的时间，默认值为0，该属性用于所有的块元素和行内元素
菜鸟教程注解

animation-iteration-count:用于定义动画的播放次数
菜鸟教程注解

animation-direction:定义当前动画播放的方向，即动画播放完成后是否逆向交替循环
菜鸟教程注解

animation: name duration timing-function delay iteration-count direction fill-mode;上述属性中必须指定name、duration，否则持续时间为0，并且永远不会播放动画
菜鸟教程注解