标签：css 3动画
一、2D/3D的转换：
| transform | 向元素应用 2D 或 3D 转换。 |
（1）平移属性：
transform：translate（x，y）其中只写一项的值为左右平移的值。（数值的正负性：左负右正，上负下正）
transform：translateX（）仅限左右移动。
transform：translateY（）仅限上下移动。
（2）旋转属性：
transform：rotate（Xdeg）括号中填需要旋转的角度值，正值顺时针，负值逆时针。
（3）缩放属性:
transform:scale( )括号中填写数值。大于1为放大，0~1之间的为缩小。
（4）倾斜属性：
transform：skew（Xdeg，Xdeg）
| transform-origin | 允许你改变被转换元素的位置。 |
transform-origin：right（left） top（bottom） % 具体像素
二、过渡属性：
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 |
transition：过渡对象 过渡时间 过渡时间的频率 延迟时间
三、@keyframes动画（自定义动画）：
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 |
animation调用自定义动画。
| animation-name | 规定 @keyframes 动画的名称。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。 |
| animation-timing-function | 规定动画的速度曲线。 |
其中可以用%来定义动画的开始和结束：开头为0%，结尾为100%。
四、媒体查询功能：
media属性规定被链接文档将显示在什么设备上。media属性用于为不同的媒介类型规定不同的样式。
（1）media的调用方式：
方法一：用link调用
media=“all and （屏幕尺寸分界像素）”
方法二：在css 页面列表中
@media书写
五、自创属性：
只要在自创的属性名称前面加上“data-”就可以自创属性。
然后在后续中的文本中用content：“（“attr（data-自创属性名）”）”调用即可。
六、弹性盒子（手机端用到的比较多）：
改变顺序：divection 属性为rtl（right-to-left）
flex-direction：弹性子元素在父元素中的位置
本文出自 “Trouble-Maker” 博客，请务必保留此出处http://13356335.blog.51cto.com/13346335/1984090
标签：css 3动画
原文地址：http://13356335.blog.51cto.com/13346335/1984090
