css3学习笔记

学完基础的css和js后我又来补css3了QAQ,没想到内容居然这么多，简单简单记录一下

阿巴阿巴，惊了！学习过程中发现css选择器也可以结合正则表达式~~（装逼利器Get）~~

CSS3之2D转换

2D之移动盒子
**transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
优点:不会影响其他元素的位置
translate的传的参数百分号是相对于盒子自身大小的百分比（耶！！！居中不用计算了）
transla对于行内元素无效

2D之旋转 roate
transform:roate(度数)
度数的单位是deg
正值顺时针，负值逆时针
默认旋转的中心点是元素的中心点
旋转中心点
transform-origin
transform-orfin:x y;
注意x和y用空格隔开
x y默认中心点是50% 50%
还可以给x y设置像素或者方位名词(top bottmom left right center)**

中心点
transform-origin
transform-orfin:x y;
注意x和y用空格隔开
x y默认中心点是50% 50%
还可以给x y设置像素或者方位名词(top bottmom left right center)

2D转换之缩放 scale
/里面的数字不跟单位，1就是1倍，2就是二倍/
transform scale(x,y)
scale(n) //可以只传一个参数
优势:不会影响其他盒子，还可以设置缩放的中心点

2D转换综合写法
1.同时使用多个转换，其格式为：
transform:translate() rotate() scale()…等
2.其顺序会影响转换的效果(先选择会改变坐标轴方向）
3.当我们同时有位移和其他属性的时候，记得将位移放在最前

css3之动画

css3动画常用属性
@keyframes 动画
animation-name 动画名称
animation-duration 动画完成一个周期花费的时间
animation-timing-function 运动曲线
animation-delay 动画何时开始
animation-iteration-count 规定动画被播放的次数
animation-direction:alternate 动画播完反方向播放
动画播放结束后
animation-fill-mode: (backwards 回到原位置) (forwards保持不动)
animation-play-state: 规定动画是否正在运行或暂停 属性:running, paused
animation 动画简写属性
animiation:动画名称 持续时间 速度曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态 ----------前两个值必写（不包含animation-play-state
速度曲线细节:
速度曲线属性：
linear 匀速
ease 低速开始，加快，结束前变慢
ease-in 以低速开始
ease-out 以低速结束
ease-in-out 动画以低速开始和结束
steps() 指定时间函数中的间隔数量（步长）