• 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*/

  • 相关阅读:
    放大镜功能
    background兼容IE9以下版本
    JSON解析
    vue.js 组件-全局组件和局部组件
    i++ ++i的原子性
    【转】程序员面试笔试宝典
    【转】函数调用栈 格式化操作
    【转】TCP三次握手过程
    一些面试题
    【转】HP(惠普)大中华区总裁孙振耀退休感言
  • 原文地址:https://www.cnblogs.com/lvqiupingboke-2019/p/12381643.html
Copyright © 2020-2023  润新知