CSS3 transform与animation

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

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

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

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

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

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

完整的hover部分:

nav>ul>li:hover ul {
    display: block;
    background-color: #d2c3aa;
    opacity: 1;
    animation: fadeIn 1s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

当然,这样对于浏览器的支持性并不好(在写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=。

植入部分

如果您觉得文章不错,可以通过赞助支持我。

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 知识, 代码段, 语法

添加新评论