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
@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 发布文章使用:只允许注册用户才可以访问!