一、分享目的
- 普及CSS基础知识
- 介绍CSS3基础及动画相关熟悉
- 通过分析iceland首页动画源码，介绍使用CSS3动画属性
- 最终目的：让大家了解，什么样的动画和动效，前端能使用CSS3写出来。
二、什么是CSS
以下是官方解释：
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
问题：
层叠 如何理解？
关键词：权重 继承
CSS层叠性是指CSS样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。
通用选择器（*） < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 <内联样式
//btn在被鼠标hover的时候，背景会变为白色
.btn{
background:red;
}
.btn:hover{
background:white;
}
css语法
selector { //选择器
property1:value1;//属性:值 --> 声明
property2:value2;
}
三、什么是CSS3
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
说人话就是：最新的css标准。
模块包括：
- 选择器
- 盒模型
- 背景和边框
- 文字特效
- 2D/3D转换
- 动画
- 多列布局
- 用户界面
四、不知不觉使用的CSS3
在平时的生产实践中，我们已经大量使用css3属性，如下所示：
//圆角
border-radius
//投影
box-shadow
//背景
background-image
background-size
background-origin
background-clip
//渐变
background: linear-gradient(direction, color-stop1, color-stop2, ...);
//框大小
box-sizing: border-box;
五、转换和过渡——我们要的动效
1）主要方法
transform 向元素应用 2D 或 3D 转换
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。 demo
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。demo（背面可以设置不可见）
2）2D 转换
translate(x,y) 沿着 X 和 Y 轴移动元素。
translateX(n) 沿着 X 轴移动元素。
translateY(n) 沿着 Y 轴移动元素。
scale(x,y) 改变元素的宽度和高度。
scaleX(n) 改变元素的宽度。
scaleY(n) 改变元素的高度。
rotate(angle) 在参数中规定角度。
skew(x-angle,y-angle) 沿着 X 和 Y 轴。
skewX(angle) 沿着 X 轴。
skewY(angle) 沿着 Y 轴。
3）3D转换
translate3d(x,y,z) 定义 3D 转化。
scale3d(x,y,z) 定义 3D 缩放转换。
rotate3d(x,y,z,angle) 定义 3D 旋转。
用法是
transform : translate(20px,30px); （移动x：20px，y：30px）
transform : scale(2); 扩大2倍
4）过渡
transition-property: width; //应用过渡的css名词 ，如果写all 代表属性都变换
transition-duration: 1s; //过渡效果花费的时间
transition-timing-function: linear; //规定过渡效果时间曲线，默认ease
transition-delay: 2s; //过渡效果开始时间，默认0
//也可以简写为：
transition: width 1s linear 2s;
六、动画
css3动画，主要是用animation，看以下范例。
div{
animation-name: myfirst; //动画名称
animation-duration: 5s; //一个周期的时间
animation-timing-function: linear; //速度曲线
animation-delay: 2s; //规定动画何时开始
animation-iteration-count: infinite; //规定动画循环次数
animation-direction: alternate; //规定动画下周期是否逆向
animation-play-state: running; //运行或暂停
//可以简写为
animation: myfirst 5s linear 2s infinite alternate;
}
//改变颜色和位置
@keyframes myfirst
{
0% {background: red; left:0px; top:0px;}
25% {background: yellow; left:200px; top:0px;}
50% {background: blue; left:200px; top:200px;}
75% {background: green; left:0px; top:200px;}
100% {background: red; left:0px; top:0px;}
}
接下来，我们对照iceland首页动画源码，解释css3动画的使用。
七、兼容性和性能
兼容性和性能，是我们必须要考虑的。
静态资源大小，cpu、内存消耗率等重要因素也是考虑范围。
兼容性方面
animation IE9以上
animation.png
transform 2d/3d 部分属性，支持IE9、10以上
transform2d.png
transform3d.png
近3个月的浏览器使用情况统计，大部分的浏览器，均可得到动画体验。当然，IE浏览器是老大难问题。不过随着时间的推移，IE 8 9都将推出历史舞台（稳住就是胜利）。
浏览器.png
总之，在高级浏览器上，css3动画，能使用更少的资源，得到很好效果。
CSS3动画性能方面注意：
- 尽可能多的利用硬件能力（3D变形会消耗更多的内存与功耗，应确实有性能问题时才去使用它，兼在权衡）
- 尽可能少的使用box-shadows与gradients
- 尽可能的让动画元素不在文档流中，以减少重排
- CSS属性在CSS动画中行为表
网友评论