• css3动画记录


    /*动画:s*/
    .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: translate(0,-1000px); /* 标准语法 */
    }
    to {
    opacity:1;
    -webkit-transform: translate(0,10px); /* Safari */
    transform: translate(0,10px); /* 标准语法 */
    }
    }

    @-webkit-keyframes fadeInDown /* Safari 与 Chrome */
    {
    from {
    opacity:0;
    -webkit-transform: translate(0,-1000px); /* Safari */
    transform: translate(0,-1000px); /* 标准语法 */
    }
    to {
    opacity:1;
    -webkit-transform: translate(0,10px); /* Safari */
    transform: translate(0,10px); /* 标准语法 */
    }
    }
    /*从左下到右上*/
    @keyframes fadeInUpLeft
    {
    from {
    opacity: 0;
    -webkit-transform: translate(-1000px,1000px); /* Safari */
    transform: translate(-1000px,1000px); /* 标准语法 */
    }
    to {
    opacity:1;
    -webkit-transform: translate(0,10px); /* Safari */
    transform: translate(0,10px); /* 标准语法 */
    }
    }

    @-webkit-keyframes fadeInUpLeft /* Safari 与 Chrome */
    {
    from {
    opacity:0;
    -webkit-transform: translate(-1000px,1000px); /* Safari */
    transform: translate(-1000px,1000px); /* 标准语法 */
    }
    to {
    opacity:1;
    -webkit-transform: translate(0,10px); /* Safari */
    transform: translate(0,10px); /* 标准语法 */
    }
    }
    /*从右到左进入*/
    @keyframes fadeInRight
    {
    from {
    opacity: 0;
    -webkit-transform: translate(1000px,0);
    transform: translate(1000px,0);
    }
    to {
    opacity:1;
    -webkit-transform: translate(10px,0);
    transform: translate(10px,0);
    }
    }

    @-webkit-keyframes fadeInRight
    {
    from {
    opacity:0;
    -webkit-transform: translate(1000px,0);
    transform: translate(1000px,0);
    }
    to {
    opacity:1;
    -webkit-transform: translate(10px,0);
    transform: translate(10px,0);
    }
    }
    /*从左到右进入*/
    @keyframes fadeInLeft
    {
    from {
    opacity: 0;
    -webkit-transform: translate(-1000px,0);
    transform: translate(-1000px,0);
    }
    to {
    opacity:1;
    -webkit-transform: translate(10px,0);
    transform: translate(10px,0);
    }
    }

    @-webkit-keyframes fadeInLeft
    {
    from {
    opacity:0;
    -webkit-transform: translate(-1000px,0);
    transform: translate(-1000px,0);
    }
    to {
    opacity:1;
    -webkit-transform: translate(10px,0);
    transform: translate(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);
    }
    }


    /*动画:e*/

  • 相关阅读:
    lxml.etree 教程5:Using XPath to find text
    .Net程序员学习Linux最简单的方法
    海南航空宁波到重庆的"变态"机票
    《帮我买单》帮我买单的故事
    VS 2005 Beta2 Team版正在下载中
    安家博客园
    标记:Oracle里面的过程两种参数的不同
    今天搞VS 2005搞了半天没真正搞出个什么名堂来
    Oracle中INSTR方法
    今天可算把VS 2005 Beta2安装上了,赶紧体会体会
  • 原文地址:https://www.cnblogs.com/lvqiupingboke-2019/p/12381643.html
Copyright © 2020-2023  润新知