• xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!


    css animation & animation-fill-mode

    css animation effect

    https://developer.mozilla.org/en-US/docs/Web/CSS/animation

    
    
    

    animation-fill-mode

    https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

    animation-fill-mode CSS属性设置CSS动画在执行之前和之后如何将样式应用于其目标

    
    /* Single animation */
    animation-fill-mode: none;
    animation-fill-mode: forwards;
    animation-fill-mode: backwards;
    animation-fill-mode: both;
    
    /* Multiple animations */
    animation-fill-mode: none, backwards;
    animation-fill-mode: both, forwards, none;
    
    
    

    @keyframes

    https://developer.mozilla.org/en-US/docs/CSS/@keyframes

    
    
    

    https://github.com/animate-css/animate.css/blob/master/source/animate.css

    https://cssreference.io/property/animation-fill-mode/

    demo

    .box{
        visibility: visible;
        animation-name: slideInRight;
    }
    .description .block .gif {
         40%;
        float: left;
        text-align: right;
        position: relative;
        left: 0;
        top: 0;
    }
    
    
    .slideInRight {
        -webkit-animation-name: slideInRight;
        animation-name: slideInRight;
    }
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    
    @keyframes slideInRight {
    0% {
        -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
        transform: translateX(100%);
        visibility: visible;
    }
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
    }
    
    
    
    .clock {
        visibility: visible;
        animation-duration: 2s;
        animation-delay: 1s;
        animation-name: rotateIn;
    }
    .rotateIn {
        -webkit-animation-name: rotateIn;
        animation-name: rotateIn;
    }
    
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    
    .clock2 {
        position: absolute;
        right: 39%;
        top: 29%;
         3%;
    }
    
    
    html {
        font-size: 62.5%;
    }
    
    @keyframes rotateIn {
     0% {
        -webkit-transform-origin: center 90%;
        -ms-transform-origin: center 90%;
        transform-origin: center 90%;
        -webkit-transform: rotateZ(-360deg);
        -ms-transform: rotateZ(-360deg);
        transform: rotateZ(-360deg);
        opacity: 1;
    }
    100% {
        -webkit-transform-origin: center 90%;
        -ms-transform-origin: center 90%;
        transform-origin: center 90%;
        -webkit-transform: rotateZ(0deg);
        -ms-transform: rotateZ(0deg);
        transform: rotateZ(0deg);
        opacity: 1;
    }
    }
    

    Animate.css

    https://daneden.me/animate

    https://animate.style/

    @charset "UTF-8";
    /*!
    Animate.css - http://daneden.me/animate
    
    Licensed under the MIT license - http://opensource.org/licenses/MIT
    
    Copyright (c) 2015 Daniel Eden
    */
    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }
    
    .animated.infinite {
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite
    }
    
    .animated.hinge {
        -webkit-animation-duration: 2s;
        animation-duration: 2s
    }
    
    @-webkit-keyframes bounce {
        0%, 100%, 20%, 53%, 80% {
            -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
            transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }
        40%, 43% {
            -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
            transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
            -webkit-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0)
        }
        70% {
            -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
            transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
            -webkit-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0)
        }
        90% {
            -webkit-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0)
        }
    }
    
    @keyframes bounce {
        0%, 100%, 20%, 53%, 80% {
            -webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
            transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
            -webkit-transform: translate3d(0, 0, 0);
            -ms-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0)
        }
        40%, 43% {
            -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
            transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
            -webkit-transform: translate3d(0, -30px, 0);
            -ms-transform: translate3d(0, -30px, 0);
            transform: translate3d(0, -30px, 0)
        }
        70% {
            -webkit-transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
            transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
            -webkit-transform: translate3d(0, -15px, 0);
            -ms-transform: translate3d(0, -15px, 0);
            transform: translate3d(0, -15px, 0)
        }
        90% {
            -webkit-transform: translate3d(0, -4px, 0);
            -ms-transform: translate3d(0, -4px, 0);
            transform: translate3d(0, -4px, 0)
        }
    }
    
    .bounce {
        -webkit-animation-name: bounce;
        animation-name: bounce;
        -webkit-transform-origin: center bottom;
        -ms-transform-origin: center bottom;
        transform-origin: center bottom
    }
    
    

    ©xgqfrms 2012-2020

    www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


  • 相关阅读:
    Ubuntu 15.04 下apt-get安装JDK
    Ubuntu下apt-get安装Java,Tomcat
    虚拟化技术比较 PV HVM
    Java8 Lambda表达式教程
    SpringMVC实现上传和下载
    web.xml中的url-pattern映射规则
    java文件读写操作大全
    Java创建文件
    JAVA文件中获取路径及WEB应用程序获取路径方法
    session.flush()与session.clear()的区别及使用环境
  • 原文地址:https://www.cnblogs.com/xgqfrms/p/13052523.html
Copyright © 2020-2023  润新知