css3常用属性 动画

总结了一些css3的常用属性平时用的多的可以收藏起来看一看

1.1 border-radius 圆角
1.2 box-shadow 阴影
1.3 box-sizing 属性允许你以特定的方式定义匹配某个区域的特定元素

2.1 background-image 背景图片
2.2 background-size 调整背景图片的大小
2.3 background-origin 规定背景图片的定位区域
2.4 background-clip 规定背景的绘制区域
2.5 linear-gradient 背景的颜色渐变

3.1 text-shadow 文本阴影
3.2 word-wrap | word-break 是否允许长单词换行，这两个可以一起使用

动画
transform 有时候为了浏览器的兼容性前面会加内核前缀-webkit-transform
2D
1、偏移属性 translate( x , y ) 可以是负值
2、旋转属性 rotate() 单位是deg
3、缩放属性 scale(x , y)
4、倾斜属性 skew( x deg, y deg)
3D
transform-style：flat / preserve-3d 默认前一个，但是3D效果需要我们在整个动画的最外层元素，设置后一个属性值。

perspective：none / px 这个属性可以理解为视距，如果把屏幕当作空间，我们做的这个3D效果距离视图的距离，默认为none（那就不要用了），或者是像素值，如1000px。

3D旋转、偏移、缩放，在2D x轴y轴的基础上多了一个z轴

transition 过渡属性
transition-property（过渡的属性的名称）。
transition-duration（定义过渡效果花费的时间,默认是 0）。
transition-timing-function:linear(匀速) ease(慢速开始，然后变快，然后慢速结束)（规定过渡效果的时间曲线，最常用的是这两个）。
transition-delay（规定过渡效果何时开始。默认是 0）

关键帧动画
一个关键帧动画，最少包含两部分，animation 属性及属性值（动画的名称和运行方式运行时间等）。
@keyframes（规定动画的具体实现过程）
animation 属性可以拆分为（当然，我们一般都写一起）
1 animation-name 规定@keyframes 动画的名称。
2 animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
3 animation-timing-function 规定动画的速度曲线。默认是 “ease”，常用的还有linear，同transtion 。
4 animation-delay 规定动画何时开始。默认是 0。
5 animation-iteration-count 规定动画被播放的次数。默认是 1，但我们一般用infinite，一直播放。