css动画

transform（转换变换）

origin	定义旋转基点-----坐标值 left top center right bottom
rotate	旋转-----旋转角度可以为负数，单位deg
skew	扭曲-----两个参数，分别为相对x轴倾斜,相对y轴倾斜，单位deg
scale	缩放-----一个参数是横竖都缩放，两个参数是分别控制横向和纵向的缩放
translate	移动-----分别为相对x轴移动，相对y轴移动

transition （平滑过渡）：

transition-property	变换的属性-----none(没有属性改变)、all(所有属性改变)、具体属性
transition-duration	变换持续时间
transition-timing-function	变换的速率-----ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线）
transition-delay	变换延迟时间

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)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

 animation（动画属性）: 

@-webkit-keyframes 动画名{                        from{}                        to{}             } @-webkit-keyframes 动画名{                 0%{}                 50%{}                100%{}   }	关键帧
animation-timing-function	动画的播放速度曲线
animation-direction	表示CSS动画是否反向播放：    animation-direction: normal-----正序播放    animation-direction: reverse-----倒序播放    animation-direction: alternate-----交替播放    animation-direction: alternate-reverse-----反向交替播放               animation-direction:上述属性组合
animation-delay	定义动画从何时开始播放： 默认值0s，表示动画在该元素上后立即开始执行，该值以秒(s)或者毫秒(ms)为单位
animation-iteration-count	动画迭代次数：         定义动画播放的次数，次数可以是1次或者无限循环，默认值只播放一次
animation-fill-mode	动画填充模式：         是指给定动画播放前后应用元素的样式     animation-fill-mode: none-----动画执行前后不改变任何样式     animation-fill-mode: forwards-----保持目标动画最后一帧的样式     animation-fill-mode: backwards-----保持目标动画第一帧的样式     animation-fill-mode: both-----动画将会执行 forwards 和 backwards 执行的动作
animation-timing-function	动画播放状态
animation-play-state	定义动画是否运行或者暂停，可以确定查询它来确定动画是否运行： running-----动画正常播放，默认 paused-----动画暂停播放