css animation & animation-fill-mode

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 {
    width: 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%;
    width: 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 发布文章使用：只允许注册用户才可以访问！

---