一、使用CSS3动画代替JS动画

  • JS动画频繁操作DOM导致效率非常低
  • 在频繁的操作DOM和CSS时，浏览器会不停的执行重排（reflow）和重绘（repaint）
  • 可以避免占用JS主线程

这边就不细说这两者具体的低优缺点。一般做2D动画的话,可以使用CSS3的transition或animation

二、CSS3动画animation属性(可直接跳转三、实例)

  • 简写:
  1. //模板
  2. animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  4. //实例
  5. animation: myAnimationName 2s linear 1s infinite forward;
  • 细说
  1. animation-name(必填)              //规定动画名称
  3. animation-duration(必填)          //完成动画的时间
  4. //值：time(1s.2s...)                默认值为 0，意味着没有动画效果
  6. animation-timing-function(常用)   //动画运动的速度
  7. /*
  8.   值： linear                       匀速
  9.        ease(默认)                   变速(先慢后快,再由快变慢)
  10.        ease-in                      低速开始
  11.        ease-out                     低速结束
  12.        ease-in-out                  低速开始和结束
  13.        cubic-bezier(n,n,n,n)        在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
  14. */
  16. animation-delay                     //动画在启动前的延迟间隔
  17. //值：time   默认值为 0
  19. animation-iteration-count(常用)     //动画的播放次数
  20. /*
  21.   值：number                        默认值1
  22.       infinite                      动画无限次播放
  23. */
  25. animation-direction                 //是否轮流反向播放动画
  26. /*
  27.   值:  normal                       正常
  28.        reverse                      反向播放
  29.        alternate                    在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放
  30.        alternate-reverse            在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放
  31. */
  33. animation-fill-mode(常用)           //当动画不播放时当动画完成时.要处于什么状态
  34. /*
  35. 值：    none                        默认，播放完动画后，画面停在起始位置
  36.        forwards                    播放完动画，停在animation定义的最后一帧(保持最后一个属性值)
  37.        backwards                   如果设置了animation-delay，在开始到delay这段时间，画面停在第一帧。如果没有设置delay，画面是元素设置的初始值
  38. */
  40. animation-play-state                //动画是否正在运行或已暂停
  41. /*
  42. 值：   paused                       指定暂停动画
  43.        running                      指定正在运行的动画，默认
  44. */

三、两个案例:CSS3实现弹窗、轮播

1. CSS3实现弹窗效果

  • 效果图

  • 代码实现

  1. //html
  2. <body>
  3.     <div class="btnDiv">
  4.         <button class="openPopUpBtn" id="openBtn">弹窗</button>
  5.     </div>
  7.     <div class="popUp">
  8.         <p>我是弹窗内容</p>
  9.         <button class="closePopUpBtn" id="closeBtn">关闭</button>
  10.     </div>
  11. </body>
  13. //css
  14. /*button样式*/
  15.     .btnDiv{
  16.         text-align: center;
  17.     }
  18.     .openPopUpBtn,.closePopUpBtn{
  19.         width:60px;
  20.         height:40px;
  21.         line-height:40px;
  22.         border:1px solid #c9c9c9;
  23.         background-color: #FFF;
  24.         box-shadow: 1px 1px 1px 1px #eee;
  25.     }
  26.     .openPopUpBtn{
  27.         margin-top:50px;
  28.     }
  29.     .openPopUpBtn:hover,.closePopUpBtn:hover{
  30.         background-color: #eee;
  31.         cursor:pointer;
  32.     }
  34.     /*弹框样式*/
  35.     .popUp{
  36.         width:600px;
  37.         height:500px;
  38.         text-align: center;
  39.         background-color: #FFFeee;
  40.         border:1px solid #ccc;
  41.         box-shadow: 1px 1px 1px 1px #eee;
  42.         position:absolute;
  43.         left:50%;
  44.         margin-left:-300px;
  45.         opacity: 0; /* 透明度为0 */
  46.     }
  48.     .closePopUpBtn{
  49.         position: absolute;
  50.         bottom:20px;
  51.         left:50%;
  52.         transform:translate(-50%);
  53.     }

html结构比较简单,一个按钮、一个弹窗。样式大家可以自行选择,这部分不是重点.

下面是实现的核心！！！！ ⬇️

我们先看JS部分,仅仅只是实现点击功能,不做JS动画

  1. window.onload = function(){
  2.     var popUp = document.getElementsByClassName('popUp'); //获取div.popUp的DOM节点,注意！popUp此时是一个数组
  3.     var openBtn = document.getElementById('openBtn');     //获取点击按钮的DOM节点
  4.     var closeBtn = document.getElementById('closeBtn');   //获取弹框里面关闭按钮的DOM节点
  6.     //点击弹窗按钮触发事件
  7.     openBtn.onclick = function(){
  8.          //给div.popUp添加一个名叫showCont的id,随后该id执行对应动画
  9.          popUp[0].setAttribute('id','showCont');
  10.     }
  12.     //点击关闭按钮触发事件
  13.     closeBtn.onclick = function(){
  14.          //给div.popUp添加一个名叫hiddenCont的id,随后该id执行对应动画
  15.          popUp[0].setAttribute('id','hiddenCont');
  16.     }
  18. }

再来看一下重点CSS3动画部分

  1. /*定义CSS样式*/
  2.     /*定义打开弹窗动画*/
  3.     #showCont{
  4.         animation: showPopUp 1s;
  5.         animation-fill-mode: forwards; /*保持动画后的状态*/
  6.     }
  8.     /*定义关闭弹窗动画*/
  9.     #hiddenCont{
  10.         animation: hiddenPopUp 1s;
  11.         animation-fill-mode: forwards;
  12.     }
  14. /*定义动画规则*/
  15.     //打开弹窗动画
  16. @keyframes showPopUp{
  17.     0%{
  18.         opacity: 0;
  19.         top:-60%;
  20.         transform: rotateZ(0deg);
  21.         //初始透明度为0,位于顶部-60%位置,旋转Z轴为0
  22.     }
  23.     50%{
  24.         transform: rotateZ(-10deg);
  25.         //动画进行一半的时候,规定旋转Z轴为-10度
  26.         //此时透明度和顶部位置都会自动计算
  27.     }
  28.     100%{
  29.         opacity: 1;
  30.         top:20%;
  31.         transform: rotateZ(0deg);
  32.         //动画结束后的最终参数
  33.     }
  34. }
  36.     //关闭弹窗动画 和打开动画相反即可
  37. @keyframes hiddenPopUp{
  38.     0%{
  39.         opacity: 1;
  40.         top:20%;
  41.         transform: rotateZ(0deg);
  42.     }
  43.     50%{
  44.         transform: rotateZ(-10deg);
  45.     }
  46.     100%{
  47.         opacity: 0;
  48.         top:-60%;
  49.         transform: rotateZ(0deg);
  50.     }
  51. }

至此我们第一个案例:CSS3动画实现弹窗就完成啦。

我们接下来看第二个案例:轮播图。这个案例比较简单

实现思路:

  1. 定义一个父级,规定宽度和高度只能显示一个轮播图大小,超出部分隐藏
  1. //html
  2. <div class="carousel"></div>
  4. //css
  5. .carousel{
  6.     width:100px;
  7.     height:100px;
  8.     overflow: hidden;
  9. }
  1. 定义存放所有轮播图的盒子
  1. //html
  2. <div class="carousel">
  3.     <div class="items"></div>
  4. </div>
  6. //css
  7. .items{
  8.     color:#FFF;
  9.     width:420px;        //存放4个轮播图
  10.     position:absolute;  //动画更改left达到轮播滚动的效果
  11.     left:0px;
  12.     animation:carouselMove 3s infinite; //定义动画相关属性
  13. }
  1. 定义动画
  1. //通过不断改变items的位置,从而显示不同的轮播图,实现效果
  2. //当动画结束之后,又返回初始值,可以无数循环
  3. @keyframes carouselMove{
  4.     0%{
  5.         left:0px;
  6.     }
  7.     35%{
  8.         left:-100px;
  9.     }
  10.     70%{
  11.         left:-200px;
  12.     }
  13.     100%{
  14.         left:-300px;
  15.     }
  16. }

完整代码:

  1. //html
  2. <div class="carousel">
  3.     <div class="items">
  4.         <div class="item1">轮播1</div>
  5.         <div class="item2">轮播2</div>
  6.         <div class="item3">轮播3</div>
  7.         <div class="item1">轮播4</div>
  8.     </div>
  9. </div>
  11. //css
  12. .carousel{
  13.     width:100px;
  14.     height:100px;
  15.     position:relative;
  16.     left:400px;
  17.     top:100px;
  18.     overflow: hidden;
  19. }
  20. .items{
  21.     color:#FFF;
  22.     width:420px;
  23.     position:absolute;
  24.     left:0px;
  25.     animation:carouselMove 3s infinite;
  26.     animation-direction: normal;
  27.     /*animation-timing-function:easy 规定动画运动的速度 animation-iteration-count:infinite 播放无数次*/
  28.     -webkit-animation:carouselMove 3s infinite;
  29.     -moz-animation-direction: normal;
  30. }
  31. .item1,.item2,.item3{
  32.     width:100px;
  33.     height:100px;
  34.     float:left;
  35. }
  36. .item1{
  37.     background-color: #12B7F5;
  38. }
  39. .item2{
  40.     background-color: #F9B041;
  41. }
  42. .item3{
  43.     background-color: #CCCCCC;
  44. }
  1. //定义动画
  2. @keyframes carouselMove{
  3.     0%{
  4.         left:0px;
  5.     }
  6.     35%{
  7.         left:-100px;
  8.     }
  9.     70%{
  10.         left:-200px;
  11.     }
  12.     100%{
  13.         left:-300px;
  14.     }
  15. }

以上就是CSS3动画的部分知识啦！谢谢！

需要源码的可以到这里下载:

源码

CSS3动画详解(结合实例)的更多相关文章

  1. css3学习--css3动画详解一(animation属性）

    ***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...

  2. css3动画详解

    一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主要以“@keyframes”开头,后面紧跟着是动画名称加上一对花括号“{…}”,括号中就是一 ...

  3. CSS3动画详解（超详细）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

  4. CSS3动画详解（图文教程）

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 本文主要内容: 过渡:transition 2D 转换 trans ...

  5. css3学习--css3动画详解二（3d效果）

    一.设置3D场景 perspective:800       //浏览器到物体的距离(像素)perspective-origin:50% (x轴) 50% (y轴)    //视点的位置 transf ...

  6. 转：【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  7. [转]Animation 动画详解（一）——alpha、scale、translate、rotate、set的xml属性及用法

    转载:http://blog.csdn.net/harvic880925/article/details/39996643 前言:这几天做客户回访,感触很大,用户只要是留反馈信息,总是一种恨铁不成钢的 ...

  8. [转] ReactNative Animated动画详解

    http://web.jobbole.com/84962/     首页 所有文章 JavaScript HTML5 CSS 基础技术 前端职场 工具资源 更多频道▼ - 导航条 - 首页 所有文章 ...

  9. [转]超级强大的SVG SMIL animation动画详解

    超级强大的SVG SMIL animation动画详解 本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究.本文地址:http://www.zhangxinxu.com/wordp ...

随机推荐

  1. [转载]C#中Invoke的用法（）

    invoke和begininvoke 区别 一直对invoke和begininvoke的使用和概念比较混乱,这两天看了些资料,对这两个的用法和原理有了些新的认识和理解. 首先说下,invoke和beg ...

  2. SQL表分区之二

    前面说的给表做表分区,现在有个问题,比如上面我们说的是按照20w为一个分割线,那些现在我们想把这个调整下怎么办?难道要把之前的分区函数和分区方案删了,重新新建分区函数和分区方案嘛? 当然,此方式肯定是 ...

  3. JVM 一套卷，助你快速掌握优化法则

    一:虚拟机内存图解 JAVA 程序运行与虚拟机之上,运行时需要内存空间.虚拟机执行 JAVA 程序的过程中会把它管理的内存划分为不同的数据区域方便管理. 虚拟机管理内存数据区域划分如下图: 数据区域分 ...

  4. jdbc --例子7

    package cn.kitty.o1; import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLE ...

  5. 关于Eclipse新建Dynamic Web Projecj默认未创建web.xml的问题

    当使用eclipse新建Dynamic Web Projecj时,由于J2EE技术规范的更新,当使用Dynamic web module version默认版本为3.0时,将默认不会创建web.xml ...

  6. Golang 数组和字符串之间的相互转换[]byte/string

    package main import ( "fmt" ) func main() { str := "hello" arr := []byte(str) fm ...

  7. 模拟window系统的“回收站”

    若要模拟window系统的“回收站”功能,具体的要求如下: 对于列表中的图片,可以通过拖动或单击“删除”的链接,以动画的方式移至“回收站”. 对于“回收站的图片”,可以通过拖动和单击“还原”的链接,以 ...

  8. Java中断异常 InterruptedException 的正确处理方式

    你看到这篇文件可能是因为你已经调用了一个抛出 InterruptedException 异常的方法,并且需要以某种方式处理它. 首先,需要了解为一个方法为啥会 throws InterruptedEx ...

  9. 关于centos7字体缺失导致项目验证码丢失报错500问题

    这个问题是这样的,迁移架构的时候项目验证码刷不出来, 页面报错500, 就像下面那样. tomcat报错是数组越界, 看下面 最诡异的是, 开发那边再三确定代码里面没有问题, 于是我试了一下把war包 ...

  10. Selenium Java Selection的使用

    用于向具有drop-down的选择框中输入内容 new Select(new ChromeDriver().findElement(By.cssSelector(" ..."))) ...