现在主流浏览器(先不管IE8，IE9吧)，尤其是移动端浏览器基本都支持css3了，为了增强页面的表现力，css3动画必不可少了。这篇文章主要整理一下我在学习css3动画所查阅的一些好的资料，并附上两个比较常用的例子。

css3动画主要包括三个部分transform,transition和animation,具体的属性和用法，如果有一定的英语和数学基础可以看w3c css3标准：https://www.w3.org/standards/techs/css#w3c_all。

其他可以参考的文章：

循环动画实现：http://www.cnblogs.com/starof/p/5443445.html

transform：http://www.cnblogs.com/starof/p/4560076.html

transition：http://www.cnblogs.com/starof/p/4582367.html

animation：http://www.cnblogs.com/starof/p/4585324.html

阮一峰的介绍：http://www.ruanyifeng.com/blog/2014/02/css_transition_and_animation.html

很多动画例子可以借用animation.css这个项目。

下面上两个例子，一个是loading动画，一个是webapp常用的切入切出效果。css代码也没什么好解释的，直接上代码和效果吧。

一.loading动画

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>loading</title>

    <style>

    .overlay {

        background-color: rgba(30, 30, 30, 0.5);

        position: fixed;

        width: 100%;

        height: 100%;

        z-index: 1000;

        left:0;

        top:0;

    }

    .loading{

        background: url(./image/loading.png) no-repeat;

        background-size: 100% 100%;

        margin-left: -40px;

        position: fixed;

        z-index: 2000;

        width: 80px;

        height:80px;

        top:50%;

        left:50%;

        -webkit-animation:loadanimation 1s linear infinite;

/*
          -moz-animation:loadanimation 1s linear infinite;
          -ms-animation:loadanimation 1s linear infinite;
          -o-animation:loadanimation 1s linear infinite;
          animation:loadanimation 1s linear infinite;
          */

    }

    @-webkit-keyframes loadanimation{

        0%{

            -webkit-transform: rotate(0deg);

        }

        100%{

            -webkit-transform: rotate(360deg);

        }

    }

    </style>

</head>

<body>

    <div class="overlay">

        <div class="loading"></div>

    </div>

</body>

</html>

效果图如下：(中间的小圈是会转的,当然这个并非一定要用css动画，用gif动态图片代替也是一样的)

更多loading动画效果可以参考这位园友写得 http://www.cnblogs.com/lhb25/p/loading-spinners-animated-with-css3.html

二.切入切出效果

<!DOCTYPE html>

<head>

<meta charset="utf-8" />

<title>slider-4</title>

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">

<meta name="description" content="" />

<meta name="keywords" content="" />

<style type="text/css">

@charset "UTF-8";

* {margin: 0;padding: 0; -webkit-tap-highlight-color: rgba(0,0,0,0); }

html {

    width: 100%;

    height: 100%;

}

body {

    min-width: 320px;

    height: 100%;

    margin: 0;

    padding: 0;

    overflow: hidden;

    font-family: Verdana;

}

header {

    position: absolute;

    z-index: 2;

    top: 0;

    left: 0;

    width: 100%;

    height: 44px;

    line-height: 44px;

    background-color: #3e74b9;

    text-align: center;

    color: #FFF;

}

section {

    position: relative;

    width: 100%;

    height: 100%;

    overflow: hidden;

}

footer {

    position: relative;

    z-index: 2;

    width: 100%;

    height: 50px;

    margin-top: -50px;

    line-height: 50px;

    background-color: rgba(0,0,0,.6);

    text-align: center;

    color: #FFF;

}

.view-container {

    position: relative;

    width: 100%;

    height: 100%;

}

.page-container {

    position: absolute;

    z-index: 1;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    background-color: #F8F8F8;

    -webkit-transform:translate3d(0,0,0);

    -webkit-backface-visibility:hidden;

}

.page-num {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 50px;

    height: 50px;

    margin-top: -25px;

    margin-left: -25px;

    font-size: 72px;

}

#pageB {

    background-color: #ECB43A;

}

/* 差速滑动组合 */

.slideSlow {

  -webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;

      -ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;

}

.slideFast {

  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);

      -ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0);

}

.slideSlowBack {

  -webkit-transition: -webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);

      -ms-transition: transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0);

}

.slideFastBack {

  -webkit-transition: -webkit-transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;

      -ms-transition: transform 300ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s;

}

.pageInt {

-webkit-transform: translateX(0);

        transform: translateX(0);

}

.pageOld {

-webkit-transform: translateX(-100%);

        transform: translateX(-100%);

}

.pageNew {

-webkit-transform: translateX(100%);

        transform: translateX(100%);

}

</style>

</head>

<body>

    <header>HEADER </header>

    <section>

      <!-- view container -->

      <ul id="pages" class="view-container" style="">

        <!-- pageA container -->

        <li id="pageA" class="page-container pageInt" style="display:;"> <b id="btnNext1" class="page-num">A</b> </li>

        <!-- pageB container -->

        <li id="pageB" class="page-container pageNew" style="display:;"> <b id="btnNext2" class="page-num">B</b></li>

        <!-- pageC container -->

        <li id="pageC" class="page-container pageNew" style="display:;"> <b id="pageBack" class="page-num">C</b></li>

      </ul>

    </section>

    <footer>FOOTER</footer>

  <!-- framework -->

  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>

  <script>

        var screenW = $('body').width();

        var btnNext1 = $('#btnNext1');

        var btnNext2 = $('#btnNext2');

        var pageBack = $('#pageBack');

        var pages = $('#pages');

        var pageA = $('#pageA');

        var pageB = $('#pageB');

        var pageC = $('#pageC');

        //.slideSlow 慢速滑动，一定是左边的页面

        //.slideFast 快速滑动，一定是右边的页面

        //.slideSlowBack 返回时，慢速滑动，一定是左边的页面

        //.slideFastBack 返回时，快速滑动，一定是右边的页面

        //.pageInt  初始页面位置

        //.pageOld  正向划过页面位置 -100%

        //.pageNew  正向未滑页面位置 +100%

        btnNext1.click(function(){

            pageA.css({'-webkit-transform' : 'translate3d(-100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});

            pageB.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0)'});

        });

        btnNext2.click(function(){

            pageB.css({'-webkit-transform' : 'translate3d(-100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});

            pageC.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0)'});

        });

        pageBack.click(function(){

            pageB.css({'-webkit-transform' : 'translate3d(0%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 400ms cubic-bezier(0.42, 0, 0.58, 1.0)'});

            pageC.css({'-webkit-transform' : 'translate3d(100%, 0px, 0px)' , '-webkit-transition' : '-webkit-transform 350ms cubic-bezier(0.42, 0, 0.58, 1.0) 0.1s'});

        });

  </script>

</body>

</html>

css3动画学习资料整理的更多相关文章

  1. iOS 开发学习资料整理（持续更新）

      “如果说我看得比别人远些,那是因为我站在巨人们的肩膀上.” ---牛顿   iOS及Mac开源项目和学习资料[超级全面] http://www.kancloud.cn/digest/ios-mac ...

  2. iOS 学习资料整理

    iOS学习资料整理 https://github.com/NunchakusHuang/trip-to-iOS 很好的个人博客 http://www.cnblogs.com/ygm900/ 开发笔记 ...

  3. Java 学习资料整理

    Java 学习资料整理 Java 精品学习视频教程下载汇总 Java视频教程 孙鑫Java无难事 (全12CD) Java视频教程 即学即会java 上海交大 Java初级编程基础 共25讲下载 av ...

  4. F4NNIU 的 Docker 学习资料整理

    F4NNIU 的 Docker 学习资料整理 Docker 介绍 以下来自 Wikipedia Docker是一个开放源代码软件项目,让应用程序部署在软件货柜下的工作可以自动化进行,借此在Linux操 ...

  5. Git学习资料整理

    Git作为一个优秀的版本控制系统,是我们开发人员必须要学会使用的一个工具,接触git一年多以来,也看了不少相关资料,今天把我所看过的一些学习资源整理一下. Git入门当然首推廖雪峰廖老师的教程:Git ...

  6. iOS学习资料整理

    视频教程(英文) 视频 简介 Developing iOS 7 Apps for iPhone and iPad 斯坦福开放教程之一, 课程主要讲解了一些 iOS 开发工具和 API 以及 iOS S ...

  7. css3动画学习笔记

    具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...

  8. NLP | 算法 学习资料整理

    UPDATE TIME: 2019-12-12 17:06:32 NLP: 对话系统: [ ] https://www.cnblogs.com/jiangxinyang/p/10789512.html ...

  9. DBN 入门学习资料整理

    建议按序阅读 1.Deep Learning 概述 Deep Learning(深度学习)学习笔记整理系列 : http://blog.csdn.net/zouxy09/article/details ...

随机推荐

  1. jquery 实践操作：iframe 相关操作

    此篇记录关于HTML 的 iframe 元素 的相关记录 定义:iframe 元素会创建包含另外一个文档的内联框架(即行内框架). 常用的基本 iframe 设置(详细设置属性参考API:http:/ ...

  2. about loops in assembly code

    总结: 实际上只有一种结构,都是 do-while 结构

  3. 洛谷P1103 书本整理

    题目描述 Frank是一个非常喜爱整洁的人.他有一大堆书和一个书架,想要把书放在书架上.书架可以放下所有的 书,所以Frank首先将书按高度顺序排列在书架上.但是Frank发现,由于很多书的宽度不同, ...

  4. 如何将Windows8系统的磁盘格式（GPT格式）转换成Windows 7系统的磁盘格式（MBR格式）

    知识点分析:随机预装Win8的电脑,磁盘为GPT格式的,如果需要安装Win7等早期版本系统,需要转换为MBR格式的,使用Diskpart命令即可完成转换.操作步骤: 注意:转换磁盘格式需要清空磁盘中的 ...

  5. Codeforces Gym101473 A.Zero or One (2013-2014 ACM-ICPC Brazil Subregional Programming Contest)

    代码: #include<iostream> #include<cstring> #include<cstdio> #include<cmath> #i ...

  6. 洛谷 P1328 生活大爆炸版石头剪刀布【模拟/环/周期】

    题目描述 石头剪刀布是常见的猜拳游戏:石头胜剪刀,剪刀胜布,布胜石头.如果两个人出拳一样,则不分胜负.在<生活大爆炸>第二季第8 集中出现了一种石头剪刀布的升级版游戏. 升级版游戏在传统的 ...

  7. [Machine Learning with Python] Data Preparation by Pandas and Scikit-Learn

    In this article, we dicuss some main steps in data preparation. Drop Labels Firstly, we drop labels ...

  8. POJ 1067 取石子游戏 [博弈]

    题意:威佐夫博弈. 思路:看了很多证明都没看懂.最后决定就记住结论好了. 对于所有的奇异局面(必败局),有通项公式 Pi = (a, b), (a = i * [(sqrt(5) + 1) / 2], ...

  9. hdu 3062 Party 2-SAT

    题目链接:HDU - 3062 有n对夫妻被邀请参加一个聚会,因为场地的问题,每对夫妻中只有1人可以列席.在2n 个人中,某些人之间有着很大的矛盾(当然夫妻之间是没有矛盾的),有矛盾的2个人是不会同时 ...

  10. org.apache.commons.io.Charsets

    requiredCharsets:由Java平台支持字符集对象标准名称,构造一个sorted map. public void test() { Map<String, Charset> ...