现在web技术不断发展，视图与数据渲染更多由前端呈现，后台更多与数据打交道。于是，我们会经常看到这样的交互场景。页面加载，看到一个框框里面有个菊花在转，然后内容呈现；或者点击个按钮，菊花在转，然后列表动态加载呈现。
确实，功能上OK，有菊花，用户也愿意等。但是，大家有没有觉得所有交互，出现菊花→出现内容，都是“砰砰砰”很生硬的感觉，尤其当内容是动态，高度不确定的时候。我们使用一些比较好的手机APP(如微信)的时候一定不会有这样的感觉，整个交互流程都是很流畅的，就像山涧的泉水，涓涓细流到山脚，而不是巨人在峡谷走路的感觉。
所以，如果菊花的呈现到内容的展示能够通过自然的动画过渡呈现，势必会增强用户体验。
而本文就将分享，我是如何渐进处理，让动画过渡呈现更自然的…… 必须的，demo，截图，源代码展示一个不少，希望本文的内容能够对您的学习有所帮助。
我记得有个版本的迅雷软件，会发现focus文本框时候，其外发光的外挂会跟着动画移动。据说这一系列N动画交互引擎的维护成本还是挺高的。
今天，偶然看到一个名叫Nikita Vasilyev的兄弟在web页面上折腾了个类似效果。其是JS实现的，我习惯性就想，可不可以CSS实现呢，一番折腾，发现，竟然……
CSS3动画、SVG和canvas都与贝塞尔曲线存在基情关系，哟呵呵呵，本文就将揭示其中不为人知的基情，习惯八卦的你可不能错过哦……
关于锚点，我3年前就写过关于锚点跳转及jQuery下相关操作与插件，不过内容略浮躁，都是偏表象、偏基本应用层面的东西；这里还是关于锚点，探讨的内容可能更深层次一点。
我们可能就很简单地认为锚点定位的触发是通过点击事件。而实际上，这种顺势而然的理解类似于古人理解为太阳绕着地球转一样，是有失偏颇的。我个人认为，锚点的定位是通过……
长篇，内容丰富，干货较多，希望本文内容能够对您的学习有所帮助！
这里的transition指的就是CSS3中的那个过渡动画属性transition. 如果我们仔细查看其支持的CSS属性值，会发现竟然有一个visibility.
此时，我的脑袋上立马冒出了3个大大的问号：visibility不就visibile/hidden/collapse等值，又不是数值什么的，怎么有动画效果呢？？
一番查阅研究，发现，这玩意还是有些作料的……
虽然，web世界中，交互动画效果N多多，但是，很多都是约定俗成的，或者称之为“有固定套路的”。
根据David Kaneda创建的Transitions动画CSS代码，我们可以将效果归结为这几大类：slide(滑来滑去), fade(淡入淡出), flip(飞来飞去), pop(大大小小).
如居中弹框呈现与隐藏，适合pop效果；绝对定位浮动层（如智能提示下拉框，自定义时间选择控件）等的呈现与隐藏使用fade效果；幻灯片播放的广告位效果一般为slide效果；点击某商品飞入页面右下角或左上角的购物车就是flip效果（类似最新FireFox浏览器关闭标签页效果）。
而对于页面上，“展开更多|收起更多”这类交互……
CSS3 3D transform变换对于没有接触过的人而言可能会是件很头疼的事情。首先涉及到N多CSS方法以及CSS函数，如何理解他们头疼；其次，3D效果的实现，需要一定的空间想象能力，但是，不少人的脑袋是会想妹子想男人，怎么办？再者，3D效果的实现还离不开各种角度方位的数学计算，要是勾起了某些人学生时代的数学梦魇，又可如何是好！
相当不少人有这样的境遇，加上自己最近也在学习CSS3 3D transform变换的相关东西。好吧，整理一下，用通俗易懂的方式表达下我对CSS3 3D transform变换的一些理解；分享知识同时，自己也整理和提高了。一举两得，何乐不为。
本文是难得的长篇，很多精心挑选制作的配图，N多帮助理解制作用心的的demo页面，还有必要的源代码展示等。希望本文的内容可以让您学习CSS3 3D transform变换的相关知识更加的轻松！
我们都知道，CSS3 media queries是响应布局实现之利器。国外很多著名的前端站点，如css-tricks, smashingmagazinegazine等都采用了响应布局。
虽然国内此技术应用就像是打不着的打火机，没法跟如火如荼的欧美相比。但是，毕竟趋势是向前发展的，总会迎来遍地开花的时候，只是时间的长短而已。
media queries可以让设备在不同尺寸下应用不同的CSS样式、布局等。以适应手持设备、普屏显示器、宽屏显示器，以及未来冰箱上的联网显示器，汽车上的数码设备等。然后，仅仅通过CSS做布局可能无法应对所有的交互请求。
……
如何让JS的修改与CSS布局改变同步呢？
大学时期，因为兴趣，花了不少时间学习flash动画制作以及AS脚本。后来开发个人网站时候，一方面想自娱自乐，另一方面由于这份无法割舍的情愫，开辟了个“阳光鑫情”的频道。要知道，这玩意很耗精力的。后来，工作忙了，任务重了，还要博客这块的压力，我只是个普通凡人，无法同时专注于几个事情，因此，“阳光鑫情”就让它去海南晒太阳去了。上周五一节前的几天，基本上没有什么活，各种x, y, z因素参杂在一起，让我突然脑中灯泡一亮——我是不是可以用HTML5实现“鑫情动画”？……
本文就将展示如何使用HTML5以及简单的JavaScript代码实现类似Flash的动画效果。
本文展示下如何使用单纯的CSS实现遮罩效果，并列举一个实例看看该技术在实际项目中的应用。一如既往，提供demo页面，丰富的截图和必要的源代码展示。总之，希望本文的内容能够对您的学习有所帮助。
我的应用
我的应用