@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 实现 侧边栏展开收起的更多相关文章

  1. animation css3动画与CSS3 @keyframes担配使用创建往复平缓动画

    通过 @keyframes 规则,您能够创建动画. 创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式. 在动画过程中,您能够多次改变这套 CSS 样式. 以百分比来规定改变发生的时间,或者通 ...

  2. JavaScript - 基于CSS3动画的实现

    在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...

  3. CSS3学习（CSS3过渡、CSS3动画）

    CSS3过渡:transition属性--专门应对颜色.长度.宽度.位置等变化的过渡 通过CSS3,我们可以在不使用Flash和JavaScript的情况下,为当前某元素从某样式改变为某样式的时候添加 ...

  4. css3动画animate

    CSS3 动画 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. @keyframes 定义动画关键帧: @keyframes anima ...

  5. css3动画从入门到精通

    什么是css3动画? 通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片.Flash 动画以及 JavaScript. CSS3带来了圆角,半透明,阴影,渐变,多背景图等新的特征,轻松实 ...

  6. css3 动画 vs js 动画

    之前被问到过,css3 动画与 js 动画孰优孰劣,脑袋的第一反应就是性能上肯定 css3 动画会好很多,但别人说不对,我就在想,不对?难道还有别的原因吗?答案是肯定的.先来看看二者实现动画的原理吧. ...

  7. 使用jquery封装的动画脚本（无动画、css3动画、js动画）

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

  8. 显示层封装及实现与优化（无动画+css3动画+js动画）

    showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  9. 【转】15个无比华丽的HTML5/CSS3动画应用

    原文转自:http://www.html5cn.org/article-7089-1.html 前几天,HTML5标准已经尘埃落定,未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心 ...

随机推荐

  1. OOAD基本概念

    学习目标: 1.理解与掌握面向对象的概念与方法. 2.使用UML. 3.完成面向对象的分析与设计工作. 4.了解OO的设计原则及一些典型的设计模式 什么是面向对象? 面向对象(Object-Orien ...

  2. Python学习笔记总结(一)对象和流程语句总结

    一.对象类型 1.数字 数字:不可变 2.字符串 字符串:不可原处修改[修改需要创建新的对象],有顺序,支持求长(len),合并(+),重复(*),索引S[0],分片(S[1:3]],成员测试(in) ...

  3. Visual studio 内存不足的解决方案（out of memory）

    编译Visual Studio项目,如果出现"out of memory "的编译错误,可以进行如下操作,加大应用程序可以使用的内存. 请先备份好系统和设置好系统还原点,大体步骤是 ...

  4. 封装JDBC事务操作，执行存储过程测试

    Oracle数据库端测试环境见:http://www.cnblogs.com/yshyee/p/4392328.html package com.mw.utils; import java.sql.C ...

  5. Keil C调试经验

    我们使用Keil C调试某系统时积累的一些经验:     1.由于Keil C对中文支持不太好,因而会出现显示的光标与光标实际所在不一致的现象,这会对修改中文注释造成影响.在Windows2000下面 ...

  6. QT下资源使用和资源占用…（可以动态加载资源文件，这样不占内存）

    原文地址:关于QT下资源使用和资源占用内存过多的问题作者:技术成就梦想     最近研究了一下如何从外部动态调用图片的问题,从而研究了图片资源的使用方法.网上最常见的帖子是这个,感觉总结的还不错. h ...

  7. Qt编程之qrc文件的链接

    在Qt里面,.qrc文件是一种类似XML结构的文件,用结构化数据描述应用程序所需要的资源位置,例如图片,应用程序的图标文件等.它最终是与.ui文件类似都被通过Qt提供的命令行工具生成对应的qrc_XX ...

  8. VS2010使用Qt库

    有参考文件可以看出,应该还是简单的. = =! Qt库的安装目录bin下,我把它添加到Path环境变量中也无用,真是搞不懂,按理来说windows搜索完当前目录会去Path指定的路径下搜索啊?为什么必 ...

  9. Some General concepts in ISO C

    [ISO C11 Clause 3]对象(object):执行环境中数据存储的一块区域,它的内容可以用来表示值.-注释:对象可以具有特定的类型.--值(value):确定类型的对象的内容的确切含义.- ...

  10. 【转】 ubuntu12.04更新源 官网和163等

    原文网址:http://blog.csdn.net/zhangliang_571/article/details/8813999 分类: LINUX 摘要: 本文列出ubuntu 12.04 LTS更 ...