（一）CSS3动画应用 - CSS3 实现侧边栏展开收起

@keyframes

规则用于创建动画。

@keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果

@keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

规定动画的名称
规定动画的时长

animation

animation 属性是一个简写属性，用于设置动画属性：

animation-name：规定 @keyframes 动画的名称。
animation-duration：规定动画完成一个周期所花费的秒或毫秒。默认是 0。
animation-timing-function：规定动画的速度曲线。默认是 "ease"。
animation-delay：规定动画何时开始。默认是 0
animation-iteration-count：规定动画被播放的次数。默认是 1。
animation-direction：规定动画是否在下一周期逆向地播放。默认是 "normal"。
animation-fill-mode：规定对象动画时间之外的状态

侧边栏实现

 /* 动画定义 */

 @-webkit-keyframes move_right {

     from {

         opacity:;

     }

     to {

         opacity:;

         -webkit-transform: translateX(120px);

         transform: translateX(120px);

     }

 }

 @keyframes move_right {

     from {

         opacity:;

     }

     to {

         opacity:;

         -webkit-transform: translateX(120px);

         transform: translateX(120px);

     }

 }

 @-webkit-keyframes move_left {

     from {

         opacity:;

     }

     to {

         opacity:;

         -webkit-transform: translateX(-120px);

         transform: translateX(-120px);

     }

 }

 @keyframes move_left {

     from {

         opacity:;

     }

     to {

         opacity:;

         -webkit-transform: translateX(-120px);

         transform: translateX(-120px);

     }

 }

 @-webkit-keyframes move_up {

     from {

         opacity:;

     }

     to {

         opacity:;

         -webkit-transform: translateY(-250px);

         transform: translateY(-250px);

     }

 }

 @keyframes move_up {

     from {

         opacity:;

     }

     to {

         opacity:;

         -webkit-transform: translateY(-250px);

         transform: translateY(-250px);

     }

 }

 /* 动画绑定 */

 .move_right {

     -webkit-animation-name            : move_right;

     animation-name            : move_right;

     -webkit-animation-duration        : 1s;

     animation-duration        : 1s;

     -webkit-animation-iteration-count :;

     animation-iteration-count :;

     -webkit-animation-fill-mode : forwards;

     animation-fill-mode : forwards;

 }

 .move_left {

     -webkit-animation-name            : move_left;

     animation-name            : move_left;

     -webkit-animation-duration        : 1s;

     animation-duration        : 1s;

     -webkit-animation-iteration-count :;

     animation-iteration-count :;

     -webkit-animation-fill-mode : forwards;

     animation-fill-mode : forwards;

 }

 .move_up {

     -webkit-animation-name            : move_up;

     animation-name            : move_up;

     -webkit-animation-duration        : 1s;

     animation-duration        : 1s;

     -webkit-animation-iteration-count :;

     animation-iteration-count :;

     -webkit-animation-fill-mode : forwards;

     animation-fill-mode : forwards;

 }

 .fadeIn {

     -webkit-transform : translateX(120px);

     transform : translateX(120px);

     opacity:;

 }

 .fadeInUp {

     -webkit-transform : translateY(-250px);

     transform : translateY(-250px);

     opacity:;

     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;

     transition :transform .2s ease-out, opacity .2s ease-out;

 }

 .fadeOutLeft {

     -webkit-transform : translateX(-120px);

     transform : translateX(-120px);

     opacity: 0.0;

     -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;

     transition :transform .2s ease-out, opacity .2s ease-out;

 }

html

 <!doctype html>

 <html lang="en" class="fullHeight">

 <head>

     <meta charset="UTF-8">

     <title>demo</title>

     <link rel="stylesheet" type="text/css" href="sidebar.css">

 </head>

 <body class="fullHeight">

     <div class='sidebar fullHeight'>sidebar</div>

     <div class="controller">

         <div>

             <button onclick="fadeIn()">淡进</button>

             <button onclick="fadeOut()">淡出</button>

         </div>

         <div>

             <button onclick="fadeInUp()">向上淡进</button>

             <button onclick="fadeOutLeft()">向左淡出</button>

         </div>

     </div>

     <script src="sidebarEffects.js"></script>

 </body>

 </html>

加入JS

 <script>

 var sidebarEl = document.querySelector(".sidebar");

 function fadeIn (e) {

     sidebarEl.className = 'sidebar fullHeight';

     sidebarEl.style.top = '0px';

     sidebarEl.style.left = '0px';

     sidebarEl.classList.add('move_right');

 }

 function fadeOut (e) {

     sidebarEl.className = 'sidebar fullHeight';

     sidebarEl.style.left = '120px';

     sidebarEl.classList.add('move_left');

 }

 function fadeInUp(e) {

     sidebarEl.className = 'sidebar fullHeight';

     sidebarEl.style.top = '250px';

     sidebarEl.style.left = '120px';

     sidebarEl.classList.add('move_up');

 }

 function fadeOutLeft(e) {

     sidebarEl.className = 'sidebar fullHeight';

     sidebarEl.style.top = '0px';

     sidebarEl.style.left = '120px';

     sidebarEl.classList.add('move_left');

 }

 </script>

（一）CSS3动画应用 - CSS3 实现侧边栏展开收起的更多相关文章

animation css3动画与CSS3 @keyframes担配使用创建往复平缓动画
通过 @keyframes 规则,您能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,您能够多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或者通 ...
JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
CSS3学习（CSS3过渡、CSS3动画）
CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...
css3动画animate
CSS3 动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. @keyframes 定义动画关键帧: @keyframes anima ...
css3动画从入门到精通
什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3带来了圆角,半透明,阴影,渐变,多背景图等新的特征,轻松实 ...
css3 动画 vs js 动画
之前被问到过,css3 动画与 js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的.先来看看二者实现动画的原理吧. ...
使用jquery封装的动画脚本（无动画、css3动画、js动画）
自己封装好的showhide.js 包含无动画.css3动画.js动画包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
显示层封装及实现与优化（无动画+css3动画+js动画）
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
【转】15个无比华丽的HTML5/CSS3动画应用
原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

随机推荐

MongoDB在win7下安装配置
1.在MongoDB官网下载最新版本,并且安装 2.解压后在MongoDB文件目录下创建data文件夹和log文件夹,并且在log文件夹中新建mongodb.log文件 3.新建一个配置文件mongo ...
jQuery读取JSON总结
1.jQuery 部分 <script src="js/jquery.js" type="text/javascript"></script& ...
转载自php 大牛的学习计划人生规划
2012年偶决定开始写博客了,不为别的,就希望可以通过博客记录我的成长历程同时也希望可以帮助一些刚毕业,刚入行业的兄弟姐们们.我们是一群充满浮躁.抱怨.迷茫的程序猿,想一想3年就这么过去了,社会变得更 ...
新鲜博客出炉www.pubwin2009.net
既然不快乐,又不喜欢这里,不如一路向西去大理.不是说不喜欢博客园,而是不喜欢现在工作的公司已经向公司递了辞职申请,然后突然有个想把,就是把公司里学到的东西做一个总结,全部写下来正好阿里云可以有免费半年 ...
C/C++ char和int的区别
字符字面值一般是用一对单引号来表示.char类型一般就是用字符字面值来初始化.赋值.由于char类型的是单字节长度,当给char类型的变量用字符字面值赋值时,当单引号里面的内容超过一个字节时,系统会自 ...
JTA
http://blog.csdn.net/hengyunabc/article/details/19433947
altium designer Summer09出现的问题解决方案
在编译原理图时,引脚和连线旁边出现很多红线,提示 error:signal with no driver. 原理图没有加入到Project里. 第一次导入没问题,但是改了个元件的封装,在更新一下(De ...
一定要学会OutputDebugString，方便源码级调试
省得到处自己print,麻烦的要死...
ASP.NET WEB API回发到客户端消息体的格式化
首先基于SOA的消息通信基本都是按照一个统一的协议规范进行交互,那么必须定义消息体.不同的交互结构设计了不同的消息体. 业界统一使用的SOAP是一种规范的XML消息内容.例如在WCF中返回的结果. 随 ...
spring注解方式 idea报could not autowire，eclipse却没有问题
解决办法1: 从根本上解决: File-Project Structure 页面 Facets下删掉 Spring(直接右键Delete) 这个解答是对的.并不会降低安全性!!因为创建项目的时候,都是 ...

（一）CSS3动画应用 - CSS3 实现 侧边栏展开收起

@keyframes

animation

侧边栏实现

html

加入JS

（一）CSS3动画应用 - CSS3 实现 侧边栏展开收起的更多相关文章

随机推荐

热门专题

（一）CSS3动画应用 - CSS3 实现侧边栏展开收起

（一）CSS3动画应用 - CSS3 实现侧边栏展开收起的更多相关文章