css3动画

transition、transform、（@keyframes）animation

过渡动画transition(默认：transition:all 0 ease 0)

语法：transition:property duration timing-function delay

1)transition-property(变化属性、all默认，代表所有，规定变化的css名称)

transition-property: none|all|property;

2)transition-duration:time(实际过渡花费的时间，默认为0，必填项)

3)transition-timing-function(规定过渡效果的时间曲线)

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

值简介

值	描述
linear	规定以相同速度开始至结束的过渡效果
ease	慢速开始，中间变快，然后慢速结束的过渡效果
ease-in	慢速开始的过渡效果
ease-out	慢速结束的过渡效果
ease-in-out	慢速开始和结束的过渡效果
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

4）transition-delay定义过渡效果何时开始

 

转换transform

1)、2D转换方法：translate()、rotate()、scale()、skew()、matrix(）

translate():元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数

rotate():元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

scale():元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

skew():元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数

matrix() :把所有 2D 转换方法组合在一起。

2）、transform-origin(默认值transform-origin:50% 50% 0)

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	left、center、right、length、%
y-axis	top、center、bottom、length、%
z-axis	length

3）、transform-style

transform-style: flat|preserve-3d;保留3D属性|不保留3D属性

4）、3D转换方法

translate3d(x,y,z) 定义 3D 转化。

translateX(x) 定义 3D 转化，仅使用用于 X 轴的值。

translateY(y)定义 3D 转化，仅使用用于Y 轴的值。

translateZ(z)定义 3D 转化，仅使用用于 Z 轴的值。

scale3d(x,y,z)定义 3D 缩放转换。

scaleX(x)定义 3D 缩放转换，通过给定一个 X 轴的值。

scaleY(y)定义 3D 缩放转换，通过给定一个 Y 轴的值。

scaleZ(z)定义 3D 缩放转换，通过给定一个 Z 轴的值。

rotate3d(x,y,z,angle)定义 3D 旋转。

rotateX(angle)定义沿 X 轴的 3D 旋转。

rotateY(angle)定义沿 Y轴的 3D 旋转。

rotateZ(angle)定义沿 Z 轴的 3D 旋转。

 

动画animation（默认：none 0 ease 0 1 normal）

animation: name duration timing-function delay iteration-count direction;

1)、animation-name:规定需要绑定到选择器的 keyframe 名称。

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

2)、animation-time:规定完成动画所花费的时间，以秒或毫秒计。

3)、animation-timing-function:规定动画的速度曲线。同transition-timing-function

4)、animation-iteration-count:规定播放的次数

animation-iteration-count: n|infinite; n次|无数次

5)、animation-direction:规定是否应该轮流反向播放动画

animation-direction: normal|alternate;

6)、animation-play-state:规定动画正在运行还是暂停。

animation-play-state: paused|running;

7)、animation-fill-mode 属性规定动画在播放之前或之后，其动画效果是否可见。

animation-fill-mode : none | forwards | backwards | both;