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 ...

随机推荐

2018华南理工大学程序设计竞赛 H-对称与反对称
H-对称与反对称题目描述给出一个N*N的方阵A.构造方阵B,C: 使得A = B + C.其中 B为对称矩阵,C为反对称矩阵. 对于方阵S中的任意元素,若(S)ij = (S)ji,则称S为对称矩 ...
HttpHandler，HttpApplication, HttpModule
选择HttpHandler还是HttpModule? HttpHandler和HttpModule之间有什么差别之所以有这个疑问,是因为在这二类对象中都可以访问Request, Response对象 ...
Document类
一.类结构 org.jsoup.nodes Class Document java.lang.Object org.jsoup.nodes.Node org.jsoup.nodes.Element o ...
设置div自适应高度滚动
<body> <div id="divc" style="overflow: auto;"> </div> <a id ...
Java发送邮件----自己封装的方法
发送邮件的封装类: package com.email; import java.util.Properties; import javax.mail.Authenticator; import ja ...
利用Django徒手写个静态页面生成工具
每个Geek对折腾自己的博客都有着一份执念背景介绍曾经多次在不同的平台写博客,但全部都以失败而告终.去年七月选择微信公众号做为平台开始了又一次的技术分享,庆幸一直坚持到现在,但随着文章发表的越来越 ...
初探ggplot2 geom__制作面积图
大家大概都对如下信息图并不陌生,该图用100%堆积面积图的方式来表现不同时期不同国家人数所占的比例.这是一种很有意思的表达方式,而面积图也是很常用的数据图表,现在让我们一起来看看如何在R里用g ...
转：如何将 Java 项目转换成 Maven 项目
如何将 Java 项目转换成 Maven 项目本文内容 Java 项目 Maven 项目 Java 项目转换成 Maven 项目本文主要介绍如何将 Java 项目转换成 Maven 项目.首先要明 ...
Java 的几种版本
1. Java ME Java ME(Java 2 Micro Edition),是为机顶盒.移动电话和PDA之类嵌入式消费电子设备提供的Java语言平台,包括虚拟机和一系列标准化的Java API. ...
java中的堆、栈和常量池简介
一.它们各自存放的数据类型: 堆:存放所有new出来的对象. 栈:存放基本类型的变量数据和对象的应用,对象(new出来的对象)本身并不存在栈中,而是存放在堆中或者常量池中(字符串常量对象存放在常量池中 ...

css3动画学习资料整理

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

随机推荐

热门专题