现在主流浏览器(先不管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. 四个简单易用的demo，关于iOS定时器和延时的，非常好用。

    1,延时执行(不可重复) 效果我直接截取控制台的日志了,就不做UI了. 2,用NSTimer执行定时和延时(可重复) [objc] view plain copy /** ** timer 可重复 * ...

  2. .bat 处理错误码

    某些命令只会返回error level,而要添加互操作性,.bat文件的返回值,exit code应该最后指定,那么需要,在这个单行的命令后面单个添加处理error level 的语句,最后再做统一的 ...

  3. [LeetCode] Repeated DNA Sequences hash map

    All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: "ACG ...

  4. 【Android】SQLite基本用法（转）

    在Android开发中SQLite起着很重要的作用,网上SQLite的教程有很多很多,不过那些教程大多数都讲得不是很全面.本人总结了一些SQLite的常用的方法,借着论坛的大赛,跟大家分享分享的.一. ...

  5. 《Linux命令行与shell脚本编程大全 第3版》Linux命令行---32

    以下为阅读<Linux命令行与shell脚本编程大全 第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下:

  6. 安装glibc错误链接导致系统崩溃，u盘启动紧急救援模式下修复系统。

    Sln 命令  创建动态符号链接 用法 sln source  dest 故障案例:一个误操作 导致了一个不小的故障,输入所有命令都无效,直接系统无法启动. 故障描述 sln /usr/lib64/l ...

  7. c# 扩展LINQ的order by函数支持通过字符串来指定列名并支持多列

    本文借鉴了https://blog.csdn.net/lan_liang/article/details/68523451. 将字符串转换为orderby的linq可以极大地减少重复劳动,可是该怎样将 ...

  8. Codeforces Gym101063 C.Sleep Buddies (2016 USP-ICMC)

    C.Sleep Buddies It is nighttime in the Earth Colony on Mars and everyone is getting ready to sleep. ...

  9. 使用企业微信的API给指定用户发送消息

    上个月比较忙,等不忙了继续写点基础教程(五一还在高铁上写项目在).因为公司的原因,自己学习了点JavaWeb的知识,重新写了一个简单的后台管理,用于记录用户注册信息的.其中有这样的一个要求,就是在用户 ...

  10. facebook architecture 2 【转】

    At the scale that Facebook operates, a lot of traditional approaches to serving web content breaks d ...