transfrom
Chrome和Safari加-webkit-/Firefox加-moz-
-
rotate() 相对于原点中心顺时针旋转，负值为逆时针旋转;rotage(45deg)
-
skew（x,y） 让元素倾斜显示，以其中心位置围绕着X轴和Y轴按照一定的角度倾斜；skew(45deg,0);rotate只是旋转，而不会改变元素的形状，skew函数不会旋转，而只会改变元素的形状 skewX(x) 仅使元素在水平方向扭曲变形 skewY(y) 仅使元素在垂直方向扭曲变形
-
scale(x,y) 使元素水平和垂直方向同时缩放，默认值为1 scaleX(x) 使元素水平方向缩放 scaleY(y) 使元素公垂直方向缩放
-
translate(x,y) 水平方向和垂直方向同时移动 translateX(x) 水平方向移动（x轴移动） translateY(y) 垂直方向移动（y轴移动）
-
transform-origin 修改元素的中心点。元素的rotate、translate、scale、skew等操作都是以元素自己中心位置进行变形 左上角：left top(top left)(0 0) 右上角：right top 左下角：left bottom 右下角：right bottom top center/right center/bottom center/left center/center center
transition
通过鼠标单击、获取焦点、被点击或对元素任何改变中触发；并平滑地以动画效果改变CSS的属性值
三个步骤：
1）在默认样式中声明元素的初始状态样式
2）在默认样式中通过添加transition
3）声明过渡元素最终状态样式，比如悬浮状态
transition-property: 指定过度的css属性（必须有中点值的属性才具备过渡效果）
transition-duration: 指定完成过渡属性所需的时间；持续时间
transition-timing-function: 指定过渡函数；默认值ease。linear/ease-in/ease-out/ease-in-out
transition-delay: 指定开始出现的延迟时间;开始时间
animation
- keyframes 关键帧 @keyframes 动画名称{} 在@keyframes中定义动画名称时，其中0%和100%，还可以使用关键词from和to来代表
- animation
animation-name: 动画名；区分大小写 animation-duration: 元素播放动画所持续的时间长；单位秒；默认0，即没有动画效果 animation-timing-function: 设置动画播放方式 animation-delay: 浏览器开始执行动画之前等待时间 animation-iteration-cout: 动画播放次数 infinite|number(在Chrome或Safari中必须加-webkit-) animation-direction: 动画播放方向 normal|alternate.normal每次循环都是向前播放；alternate是在第偶数次向前播放，第奇数次向反方向播放 animation-play-state:播放状态 running|paused 播放不一定是从开始地方，而是从暂停的那个位置开始 animation-fill-mode: 在动画开始之前和结束之后发生的操作。none|forwards|backwords|both eg:背景色pink ,动画效果：红-绿-青-黄-蓝 none: pink-红-绿-青-黄-蓝-pink forwards:pink-红-绿-青-黄-蓝 backwards:红-绿-青-黄-蓝-pink both:红-绿-青-黄-蓝
