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>

posted @ 2016-05-05 21:19 山楂条子阅读(450) 评论(0) 编辑收藏举报

刷新页面返回顶部

山楂片儿

因上努力果上随缘

css3动画学习资料整理

公告

山楂片儿

因上努力 果上随缘

css3动画学习资料整理

公告

因上努力果上随缘