css3动画学习资料整理

现在主流浏览器(先不管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动画学习资料整理的更多相关文章

iOS 开发学习资料整理（持续更新）
“如果说我看得比别人远些,那是因为我站在巨人们的肩膀上.” ---牛顿 iOS及Mac开源项目和学习资料[超级全面] http://www.kancloud.cn/digest/ios-mac ...
iOS 学习资料整理
iOS学习资料整理 https://github.com/NunchakusHuang/trip-to-iOS 很好的个人博客 http://www.cnblogs.com/ygm900/ 开发笔记 ...
Java 学习资料整理
Java 学习资料整理 Java 精品学习视频教程下载汇总 Java视频教程孙鑫Java无难事 (全12CD) Java视频教程即学即会java 上海交大 Java初级编程基础共25讲下载 av ...
F4NNIU 的 Docker 学习资料整理
F4NNIU 的 Docker 学习资料整理 Docker 介绍以下来自 Wikipedia Docker是一个开放源代码软件项目,让应用程序部署在软件货柜下的工作可以自动化进行,借此在Linux操 ...
Git学习资料整理
Git作为一个优秀的版本控制系统,是我们开发人员必须要学会使用的一个工具,接触git一年多以来,也看了不少相关资料,今天把我所看过的一些学习资源整理一下. Git入门当然首推廖雪峰廖老师的教程:Git ...
iOS学习资料整理
视频教程(英文) 视频简介 Developing iOS 7 Apps for iPhone and iPad 斯坦福开放教程之一, 课程主要讲解了一些 iOS 开发工具和 API 以及 iOS S ...
css3动画学习笔记
具体学习地址:http://www.imooc.com/learn/33CSS3中的三种动画:tranform形变动画/transition缓动动画/animation逐帧动画; tranform: ...
NLP | 算法学习资料整理
UPDATE TIME: 2019-12-12 17:06:32 NLP: 对话系统: [ ] https://www.cnblogs.com/jiangxinyang/p/10789512.html ...
DBN 入门学习资料整理
建议按序阅读 1.Deep Learning 概述 Deep Learning(深度学习)学习笔记整理系列 : http://blog.csdn.net/zouxy09/article/details ...

随机推荐

洛谷P2168 荷马史诗
哈夫曼树原理. k=2时,和合并果子一样一样的. 由此思考,k>2时,应该也有相似的原理.确实如此,k进制哈夫曼树,每个结点最多会有k-1个子结点,对应k-1个元素(“元素”可以是更深层的子树) ...
用cflow工具生成代码函数调用关系【转】
转自:http://www.cnblogs.com/feng-zi/p/5469652.html . 安装 sudo apt-get install cflow .使用 cflow [options. ...
pcm2aac
1.下载faac源代码:http://downloads.sourceforge.net/faac/faac-1.28.zip 2.在VAWARE上进行交叉编译,安装. ./configure --t ...
Python学习杂记_3_字符串操作的常用方法
字符串操作字符串是可以通过下标来进行取值的,但是由于字符串是不可变变量,不能通过下标来修改它的值(形式如字符串[下标]),下标从0开始,最大下标值是字符串长度减1,即len(string)-1 P ...
C# 的 String.CompareTo Equals和==的比较
String.CompareTo 语法 public int CompareTo( string strB) 返回值小于 0,实例小于参数 strB: 0,实例等于参数 strB: 大于 0, ...
【转载】SQL SERVER 函数大全
SQL Server 函数大全一旦成功地从表中检索出数据,就需要进一步操纵这些数据,以获得有用或有意义的结果.这些要求包括:执行计算与数学运算.转换数据.解析数值.组合值和聚合一个范围内的值等. 下 ...
七、Ubuntu 关机或者重启
重启命令:1.reboot2.shutdown -r now 立刻重启(root用户使用)3.shutdown -r 10 过10分钟自动重启(root用户使用)4.shutdown -r 20:35 ...
Codeforces Gym101063 F.Bandejao (2016 USP-ICMC)
F.Bandejao It is lunch time on Mars! Everyone has got that big smile on their faces, all eager to se ...
Codeforces 632F Magic Matrix（bitset）
题目链接 Magic Matrix 考虑第三个条件,如果不符合的话说明$a[i][k] < a[i][j]$ 或 $a[j][k] < a[i][j]$ 于是我们把所有的$(a[i][j ...
CF917C Pollywog —— 状压DP + 矩乘优化
C. Pollywog 题目描述原题题目链接.题目大意为:有$x$只蝌蚪,在$n$个石头中的最左端的$x$个石头上,这$n$个石头是在同一直线上的.每一次只能最左边的一个蝌蚪进行跳跃,并且只能跳$1 ...

css3动画学习资料整理

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

随机推荐

热门专题