CSS动画效果（过渡、变换、帧动画）

动画效果

过渡（transition）：

transition:(all) 2s

表示为所有属性均为两秒过渡

若要特指某种属性则为：

transition:属性 2s

过渡曲线：

ease默认（过渡函数）

可设置为linear (线性)

延时属性

默认为0s，适用于多个动画

变幻（transform）：

平移translate（x,y）分别代表x,y两个轴

translate3d(x,y,z)

     transform: translateX();特指x

     transform: translateY();特指y

缩放 transform:scale(x,y)

transform:scales3d(x,y,z)

transform:scaleX/Y/Z()特指某一轴

旋转

    transform:rotate(xdeg)x表示多少度

transform:rotateX/Y()沿X,Y轴旋转

均中心点（为对角线交点）进行旋转

Transform-origin：left

以图形左边进行旋转

帧动画

animation: 名称 时间 运行方式 运行次数（infinite永久）延时

@keyframes 名称{

from{

}

to{

}

}

从某种状态到另一种状态