持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情
-
CSS3中的动画
- CSS3中提供了自己的动画制作方法，这可以在许多网页中取代动画图片、flash动画以及JavaScript。
-
transform-style属性
-
用于设置被嵌套的子元素在父元素的3D空间中显示，子元素会保留自己的3D转换坐标轴
-
属性值：
-
flat：所有子元素在2D平面呈现
-
preserve-3d：保留3D空间
-
-
3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style:preserve-3d，来使其变成一个真正的3D图形
-
一般来说，该属性设置给3D变换图形的父级元素
-
浏览器兼容
- IE10、Firefox以及Opera支持transform属性；Chrome和Safari需要前缀-webkit-；IE9需要前缀-ms-
-
-
CSS3动画制作分为两步：创建动画、绑定动画
-
创建动画
-
@keyframes规则
- @keyframes规则用于创建动画，在@keyframes中规定某项CSS样式，就能创建由从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。需要使用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%。0%是动画的开始，100%是动画的完成
-
@keyframes语法
- @keyframes动画名称｛动画过程，可以添加任意百分比处的动画细节｝
- @keyframes动画名称｛动画过程，可以添加任意百分比处的动画细节｝
-
-
-
animation属性
-
需要将@keyframes中创建的动画捆绑到某个选择器，否则不会产生动画效果。animation属性用于对动画进行捆绑
-
语法：
div｛animation：动画名称 过渡时间 速度曲线 动画次数 延时时间；｝ -
其中必须设置动画名称和过渡时间，其他属性值可以根据需求设置
-
浏览器兼容：IE10、Firefox以及Opera支持@keyframes规则和animation属性。Chrome和Safari需要前缀-webkit-。IE9，以及更早的版本，不支持@keyframes规则或animation属性
-
