@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. Retinex processing for automatic image enhancement 翻译

    Retinex processing for automatic image enhancement 摘要: 最近六七年来,人们从新燃起了对Retinex computation的兴趣,特别是在它对图 ...

  2. Linux修改时间时区并在Tomcat中生效

    Linux查看当前时间时区linux:~ # datelinux:~ # date –Rlinux:~ # zdump -v /usr/share/zoneinfo/Asia/Beijing ---- ...

  3. php 之 PDO数据访问抽象层(0513)

    PDO(PHP Data Objects)是一种在PHP里连接数据库的使用接口. PDO与mysqli曾经被建议用来取代原本PHP在用的mysql相关函数, 基于数据库使用的安全性,因为后者欠缺对于S ...

  4. jQuery对下拉框、单选框、多选框的处理

    下拉框: //得到下拉菜单的选中项的文本(注意中间有空格) var cc1 = $(".formc select[@name='country'] option[@selected]&quo ...

  5. AFNetworking 系列教程

      前几天发现iOS9.xcode7之后NSURLConnection的API被弃用了,取而代之的是NSURLSession,看到这我首先想到了AFNetworking,因为工程的所有网络请求都是基于 ...

  6. C语言中如何获得文件大小

    方法一: 获得文件大小需要用到2个函数:fseek() , ftell() fseek()函数: 原型:intfseek(FILE *stream, long offset, int fromwher ...

  7. cf B. Permutation

    #include <cstdio> #include <cstring> #include <algorithm> using namespace std; ]; ...

  8. 在NGINX作反向代理，CI（CodeIgniter）的PHP框架下限制管理目录的IP的实现

    这个搞得有点久,不过,还算完美解决. 主要是前端NGINX,后端也是NGINX. 前端的NGINX不好作相关的URL权限限制,因为所有的URL在CI里都要经过INDEX.PHP重定向. 并且,在后端N ...

  9. 带KEY的SCP命令，老是要查，这次写在这里吧，

    有些东东记不住,急要用时老是想不起,放在这里吧, scp -r -i /xxx/rsa.key -P port user@ip:/source/ /target/

  10. 通过JCONSOLE监控TOMCAT的JVM使用情况

    这个也是要学入一下,JVMr 虚拟机原理不可少. 参考配置URL“: http://blog.163.com/kangle0925@126/blog/static/277581982011527723 ...