现在主流浏览器(先不管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. pat 甲级 1056. Mice and Rice (25)

    1056. Mice and Rice (25) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue Mice an ...

  2. ZOJ1608 Two Circles and a Rectangle

    Time Limit: 2 Seconds      Memory Limit: 65536 KB Give you two circles and a rectangle, your task is ...

  3. 遍历页面所有的Checkbox，显示选中的ID

    原文发布时间为:2009-04-13 -- 来源于本人的百度文章 [由搬家工具导入] 1、 foreach (Control objCtrl in this.Page.Controls[3].Cont ...

  4. <转>JavaScript的IE和火狐的兼容性解决办法

    原文发布时间为:2009-05-06 -- 来源于本人的百度文章 [由搬家工具导入] 1. document.form.item 问题 (1)现有问题： 现有代码中存在许多 document.form ...

  5. 把握linux内核设计思想系列【转】

    转自:http://blog.csdn.net/shallnet/article/details/47734053 版权声明:本文为博主原创文章,未经博主允许不得转载.如果您觉得文章对您有用,请点击文 ...

  6. nodejs编写实例基础操作

    学习视频地址 https://cnodejs.org/topic/5a72c66ace45d440451465c3   初始化项目 首先查看项目中是否有package.json 文件,如果有可执行np ...

  7. 获取应用在AppStore的地址和跳转到AppStore

    获取应用程序在App Store中的链接地址 http://itunes.apple.com/cn/app/id533655318?mt=8 把id改成自己app的id就可以了,或者在iTunes和A ...

  8. JMeter 中Random 随机函数的使用

    场景:在做接口测试时,比如说要求用户的手机号码不允许重复,那此时可以通过Random 随机函数来解决此问题: 1.在JMeter 工具中,选择{选项-函数助手对话框-} 函数助手中选择 Random ...

  9. Your build settings specify a provisioning profile with the UUID, no provisioning profile was

    http://blog.csdn.net/rbyyyblog/article/details/12220875 在Archive项目时,出现了“Your build settings specify ...

  10. mac 安装 mysql-python

    1 首先安装mysql 要那种纯净,独立的mysql,不是xampp里附带的 2 下载 mysql-python压缩包,解压,找到里面的site.cfg里的 mysql_config = /usr/l ...