2017

01-10 eslint和editorconfig教程
01-10 Atom编辑器配置
01-04 CSS 设置background-image通用方法

2016

12-29 JQuery.proxy使用方法
12-25 Laravel中间件解决Ajax跨域问题
12-22 在Windows环境中添加laravel homestead虚拟机教程
12-19 修改phpstorm主题
12-16 使用Repository模式开发Laravel项目
12-16 如何使用ES6 (Babel)
12-09 CSS3 flex结合flex-flow制作流布局页面
12-09 对比jekyll 和 bundle exec jekyll
12-07 解决Git 删除已经 add 的文件
12-04 Mac下配置多个github用户SSH认证
12-03 github-pages 未限定版本,导致 jekyll 启动不兼容
12-01 transition结合transform制作出3D效果
10-14 js根据秒数显示指定格式的字符串
10-14 如何制作jquery插件
10-14 移动端绑定手机页面
10-13 Html5 Audio事件loadeddata和addEventLister之间的特殊关系
10-09 学习CSS3特性REM
10-07 解决macos sierra 备忘录崩溃问题
10-06 Markdown 语法和 MWeb 写作使用说明
10-06 好用的Markdown编辑器一览
10-06 如何使用MWeb
10-06 Jekyll Page Comment
10-05 在github pages上面搭建jekyll 博客使用方法
10-05 Welcome to Jekyll!

今天看到看到网上一个博客,上面有个功能特别吸引我,就是点击链接会展开一个侧边栏,而那个侧边栏有动画效果,当然你也可以通过jquery来做,不过有CSS3不用jquery也可以。

下面这段代码你们可以试试:

    transform: translate3d(300px,0,0);
    transition: all .2s ease-in;

CSS3中Transform,Transition,Animation的区别

Transform:对元素进行变形;

Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。但只有两个关键贞。开始,结束。

Animation:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画。可以设置多个关键贞。

Transition与Animation:

transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元素css的属性值,从而达到一种动画的效果。

参考:

  1. http://www.w3cplus.com/css3/css3-3d-transform.html