zoukankan      html  css  js  c++  java
  • css3动画(从上、左下、左、右进入页面)

    /*动画-start*/
    .animated {
        animation-duration: 1.5s !important;
        -webkit-animation-duration: 1.5s !important;
        animation-fill-mode: both !important;
        -webkit-animation-fill-mode: both !important;
    }
    .animated02 {
        animation-duration: 1s !important;
        -webkit-animation-duration: 1s !important;
        animation-fill-mode: both !important;
        -webkit-animation-fill-mode: both !important;
    }
    /*逐渐显示*/
    .toShow {
        position: absolute;
        animation: toShow 1.5s 0.5s;
        animation: toShow 1.5s 0.5s;
        animation-fill-mode: both !important;
        -webkit-animation-fill-mode: both !important;
    }
    /* 放大效果*/
    .enlarge {
        animation-name: enlarge;
        -webkit-animation: enlarge;
    }
     /*从上到下进入*/
    .fadeInDown {
        animation-name: fadeInDown;
        -webkit-animation: fadeInDown;
    }
    /*从下到上进入*/
    .fadeInUpLeft {
        animation-name: fadeInUpLeft;
        -webkit-animation: fadeInUpLeft;
    }
    /*从右到左进入*/
    .fadeInRight {
        animation-name: fadeInRight;
        -webkit-animation: fadeInRight;
    }
    /*从左到右进入*/
    .fadeInLeft {
        animation-name: fadeInLeft;
        -webkit-animation: fadeInLeft;
    }
    /*中心旋转*/
    .coreRotate {
        animation-name: coreRotate;
        -webkit-animation-name: coreRotate;
    }
    
    @keyframes toShow {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }
    @-webkit-keyframes toShow {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }
    
    @keyframes enlarge
    {
        from {
            opacity: 0;
            -ms-transform: scale(0.1,0.1); /* IE 9 */
            -webkit-transform: scale(0.1,0.1); /* Safari */
            transform: scale(0.1,0.1); /* 标准语法 */
        }
        to {
            opacity:1;
            -webkit-transform:scale(1,1);
            transform:scale(1,1);
        }
    }
     
    @-webkit-keyframes enlarge /* Safari 与 Chrome */
    {
        from {
            opacity:0;
            -ms-transform: scale(0.1,0.1); /* IE 9 */
            -webkit-transform: scale(0.1,0.1); /* Safari */
            transform: scale(0.1,0.1); /* 标准语法 */
        }
        to {
            opacity:1;
            -webkit-transform:scale(1,1);
            transform:scale(1,1);
        }
    }
    
    /*从上到下*/
    @keyframes fadeInDown
    {
        from {
            opacity: 0;
            -webkit-transform: translate(0,-1000px); /* Safari */
            transform: stranslate(0,-1000px); /* 标准语法 */
        }
        to {
            opacity:1;
            -webkit-transform: translate(0,10px); /* Safari */
            transform: stranslate(0,10px); /* 标准语法 */
        }
    }
     
    @-webkit-keyframes fadeInDown /* Safari 与 Chrome */
    {
        from {
            opacity:0;
            -webkit-transform: translate(0,-1000px); /* Safari */
            transform: stranslate(0,-1000px); /* 标准语法 */
        }
        to {
            opacity:1;
            -webkit-transform: translate(0,10px); /* Safari */
            transform: stranslate(0,10px); /* 标准语法 */
        }
    }
    /*从左下到右上*/
    @keyframes fadeInUpLeft
    {
        from {
            opacity: 0;
            -webkit-transform: translate(-1000px,1000px); /* Safari */
            transform: stranslate(-1000px,1000px); /* 标准语法 */
        }
        to {
            opacity:1;
            -webkit-transform: translate(0,10px); /* Safari */
            transform: stranslate(0,10px); /* 标准语法 */
        }
    }
     
    @-webkit-keyframes fadeInUpLeft /* Safari 与 Chrome */
    {
        from {
            opacity:0;
            -webkit-transform: translate(-1000px,1000px); /* Safari */
            transform: stranslate(-1000px,1000px); /* 标准语法 */
        }
        to {
            opacity:1;
            -webkit-transform: translate(0,10px); /* Safari */
            transform: stranslate(0,10px); /* 标准语法 */
        }
    }
    /*从右到左进入*/
    @keyframes fadeInRight
    {
        from {
            opacity: 0;
            -webkit-transform: translate(1000px,0); 
            transform: stranslate(1000px,0); 
        }
        to {
            opacity:1;
            -webkit-transform: translate(10px,0); 
            transform: stranslate(10px,0); 
        }
    }
     
    @-webkit-keyframes fadeInRight 
    {
        from {
            opacity:0;
           -webkit-transform: translate(1000px,0); 
            transform: stranslate(1000px,0); 
        }
        to {
            opacity:1;
            -webkit-transform: translate(10px,0); 
            transform: stranslate(10px,0); 
        }
    }
    /*从左到右进入*/
    @keyframes fadeInLeft
    {
        from {
            opacity: 0;
            -webkit-transform: translate(-1000px,0); 
            transform: stranslate(-1000px,0); 
        }
        to {
            opacity:1;
            -webkit-transform: translate(10px,0); 
            transform: stranslate(10px,0); 
        }
    }
     
    @-webkit-keyframes fadeInLeft 
    {
        from {
            opacity:0;
           -webkit-transform: translate(-1000px,0); 
            transform: stranslate(-1000px,0); 
        }
        to {
            opacity:1;
            -webkit-transform: translate(10px,0); 
            transform: stranslate(10px,0); 
        }
    }
    
    /*绕中心旋转*/
    @keyframes coreRotate {
        5% {
            transform:rotate(5deg);
            -ms-transform:rotate(5deg); /* IE 9 */
            -webkit-transform:rotate(5deg); /* Safari and Chrome */
        }
        30% {
            transform:rotate(-5deg);
            -ms-transform:rotate(-5deg); 
            -webkit-transform:rotate(-5deg); 
        }
        60% {
            transform:rotate(5deg);
            -ms-transform:rotate(5deg); 
            -webkit-transform:rotate(5deg);
        }
        90% {
            transform:rotate(-5deg);
            -ms-transform:rotate(-5deg); 
            -webkit-transform:rotate(-5deg); 
        }
    }
    @-webkit-keyframes coreRotate {
        5% {
            transform:rotate(5deg);
            -ms-transform:rotate(5deg); /* IE 9 */
            -webkit-transform:rotate(5deg); /* Safari and Chrome */
        }
        30% {
            transform:rotate(-5deg);
            -ms-transform:rotate(-5deg); 
            -webkit-transform:rotate(-5deg); 
        }
        60% {
            transform:rotate(5deg);
            -ms-transform:rotate(5deg); 
            -webkit-transform:rotate(5deg);
        }
        90% {
            transform:rotate(-5deg);
            -ms-transform:rotate(-5deg); 
            -webkit-transform:rotate(-5deg); 
        }
    }
    /*动画-end*/
  • 相关阅读:
    [歌词]世界末日
    AJAX是什么?
    [转]Moving Your Access 2002 Database to SQL Server
    .net from身份验证的配置介绍
    ajax
    cmd常用命令
    查看端口解除端口占用
    好久没进来了,今天发一个原创的DatePicker
    真倒霉,前不久分區表錯誤把我數據全部搞沒了
    DataGrid利用DataView过滤,排序
  • 原文地址:https://www.cnblogs.com/duanzhenzhen/p/10979205.html
Copyright © 2011-2022 走看看