CodeSky 代码之空

前两天在研究CSS3中的transform和animation，感觉transform对于一个没有立体感的人而言还是很难的，但是，这里有一篇文章却把它讲的好理解多了（但还是有不理解的部分，果然技术有待加强）：好吧，CSS3 3D transform变换，不过如此！

本文演示均未考虑到Chrome问题

先从简单的animation开始吧，学习animation是因为transform虽然可以实现过渡，但对于nav的二级菜单而言，我更希望他能在hover时显示并且是逐渐显示的，光改变透明度，这肯定不行，我不能让他占位以及得让他在这个时候不能点呀，如果使用display，过渡效果又没用了（在 CSS3 transition 过渡（渐变）属性已有说明），可是我又不想用jQuery（或者js——用js自己写函数岂不是更麻烦了），后来就知道了这个属性。

使用animation起来其实是十分简单的。 导航条演示 chrome支持性不良 原因见下文

1@keyframes fadeIn {
2	0% {
3		opacity: 0;
4	}
5
6	100% {
7		opacity: 1;
8	}
9}
10

首先，你需要一个keyframe。然后，使用animation: fadeIn 1s;即可。0%和100%也可以换成from to 有点像关键帧吧。中间的百分比也可以作为关键帧实现过渡。

完整的hover部分：

1nav>ul>li:hover ul {
2	display: block;
3	background-color: #d2c3aa;
4	opacity: 1;
5	animation: fadeIn 1s;
6}
7
8@keyframes fadeIn {
9	0% {
10		opacity: 0;
11	}
12
13	100% {
14		opacity: 1;
15	}
16}
17

当然，这样对于浏览器的支持性并不好（在写SkyTips!时发现chrome蛋疼了）。我们还需要加上-webkit-等等。关于animation的详情，可以看手册： https://developer.mozilla.org/en-US/docs/Web/CSS/animation 以及： http://www.w3cplus.com/content/css3-animation

那么最复杂的问题，估计是transform了，前面贴出了一个简单易懂的教程，自己还是不太会使，这里做出一个Y轴旋转的动画仅供参考。

演示

还是运用了animation，接下来，就可以测试backface-visibility属性做了些什么（事实上我们会发现背面变成空白），当然，没有深究，不知道具体应用在什么地方=A=：backface-visibility: visible|hidden;

使用Transform时也要注意浏览器支持的问题：https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform

这一点，在SkyTips!做测试时已经改进，诸君可放心使用。

另外，这里弱弱的吐槽一句，浏览器表现差异在SkyTips!测试时发现了许多不同，于是就越发感觉SkyTips!的不足，技术上去了以后，感觉还得进行大整改=w=。