@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. 使用PHP对数据库输入进行恶意代码清除

    这是一个有用的PHP函数清理了所有的输入数据,并删除代码注入的几率. function sanitize_input_data($input_data) { $input_data = trim(ht ...

  2. 文成小盆友python-num6 -反射 ，常用模块

    本次主要内容: 内容补充 python中的反射 常用模块 一,内容补充: 利用上次说到的递归的方法来实现阶乘. 说明:利用函数递归的方法来实现阶乘如: 1*2*3*4*5*6*7 代码实现如下: de ...

  3. Python学习笔记总结(三)类

    一.类简单介绍 1.介绍 类是Python面向对象程序设计(OOP)的主要工具,类建立使用class语句,通过class定义的对象. 类和模块的差异,类是语句,模块是文件. 类和实例 实例:代表程序领 ...

  4. fgets和scanf的区别

    fgets和scanf的区别 1.测试使用scanf的一个例子: #include "stdio.h" #include "string.h" int main ...

  5. fontresize 移动端的手机字体 大小设置

    这段js 需要置于页面上端 也就是 需要先加载js然后加载页面 (这段js是原生js而且比较短小 基本对页面加载速度无影响) FontResize : function(maxWidth){ (fun ...

  6. LINUX小技巧，如何在指定目录下搜索到含特定关键字的文件。

    先找出文件,然后将文件作为输入,找具体关键字 find /etc -name "*" | xargs grep "Hello"

  7. Maven, IntellJ Idea 配置注意点

    1. Maven要自己安装一个: 2. Maven设置中,settings.xml和repository地址都配置成自己: 3. Enable Auto import 4. 找不到jar文件时,自己的 ...

  8. BZOJ1662: [Usaco2006 Nov]Round Numbers

    1662: [Usaco2006 Nov]Round Numbers Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 147  Solved: 84[Sub ...

  9. 符号表实现（Symbol Table Implementations）

    符号表的实现有很多方式,下面介绍其中的几种. 乱序(未排序)数组实现 这种情况,不需要改变数组,操作就在这个数组上执行.在最坏的情况下插入,搜索,删除时间复杂度为O(n). 有序(已排序)数组实现 这 ...

  10. C++类静态成员的初始化和用法探讨

    一.一般类型的类的静态变量 1.首先看下面的代码: class CTest1 { public: static int m_num1; void printNum(){cout << m_ ...