（一）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主导,当然作为开发者对这一喜讯更为动心 ...

随机推荐

不用标准库实现memmove，借助一个缓冲区temp，即使src和dest所指的内存有重叠也能正确拷贝
void *mymemmove(void *dest,const void *src,size_t count) { char temp[count]; int i; char *d=(char *) ...
Qt5.4静态编译方法
静态编译,就是编译器在编译可执行文件的时候,将可执行文件需要调用的对应动态链接库(.so或.lib)中的部分提取出来,链接到可执行文件中去,使可执行文件在运行的时候不依赖于动态链接库.这样就可以发布单 ...
gcc-gdb
1.使用gdb ,习惯了cgdb ,加上了vim. 调试发现,使用了stl,不知如何查看使用的vector,stack等中的值,来吧.gdb-std-views.下载 1)下载好之后,mv stl-v ...
C语言之链表————（转载）
#include <stdio.h>#include <malloc.h>#define LEN sizeof(struct student) /*-------------- ...
驱动程序无法通过使用安全套接字层(SSL)加密与 SQL Server 建立安全连接
由于项目中必须得用JDK6来作为Java环境,于是连接SQLServer时出现了com.microsoft.sqlserver.jdbc.SQLServerException: 驱动程序无法通过使用安 ...
禁用与启用Button点击
//启用查询按钮 btnFpSelect.setClickable(true); //禁用查询按钮 btnFpSelect.setClickable(false);
解决android4.0系统中菜单(Menu)添加Icon无效问题
本文转载自: http://blog.csdn.net/stevenhu_223/article/details/9705173 在Android4.0系统中,创建菜单Menu,通过setIcon方法 ...
NOI2013 UOJ122 向量内积
神题...... 还是大神讲得比较清晰~orz http://dffxtz.logdown.com/posts/197950-noi2013-vector-inner-product 启发题:poj3 ...
利用Connect By构造数列
,) yymm ;
ZOJ3765---Lights (Splay伸展树)
Lights Time Limit: 8 Seconds Memory Limit: 131072 KB Now you have N lights in a line. Don't wor ...

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

@keyframes

animation

侧边栏实现

html

加入JS

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

随机推荐

热门专题

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

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