页面集成插件-博客详情页2
下载插件
https://animate.style/
@charset "UTF-8" ;
. animated {
animation- duration: 1 s;
animation- fill- mode: both;
}
. animated. infinite {
animation- iteration- count: infinite;
}
. animated. hinge {
animation- duration: 2 s;
}
. animated. flipOutX,
. animated. flipOutY,
. animated. bounceIn,
. animated. bounceOut {
animation- duration: .75 s;
}
@keyframes bounce {
from, 20 % , 53 % , 80 % , to {
animation- timing- function: cubic- bezier ( 0.215 , 0.610 , 0.355 , 1.000 ) ;
transform: translate3d ( 0 , 0 , 0 ) ;
}
40 % , 43 % {
animation- timing- function: cubic- bezier ( 0.755 , 0.050 , 0.855 , 0.060 ) ;
transform: translate3d ( 0 , - 30 px, 0 ) ;
}
70 % {
animation- timing- function: cubic- bezier ( 0.755 , 0.050 , 0.855 , 0.060 ) ;
transform: translate3d ( 0 , - 15 px, 0 ) ;
}
90 % {
transform: translate3d ( 0 , - 4 px, 0 ) ;
}
}
. bounce {
animation- name: bounce;
transform- origin: center bottom;
}
@keyframes flash {
from, 50 % , to {
opacity: 1 ;
}
25 % , 75 % {
opacity: 0 ;
}
}
. flash {
animation- name: flash;
}
@keyframes pulse {
from {
transform: scale3d ( 1 , 1 , 1 ) ;
}
50 % {
transform: scale3d ( 1.05 , 1.05 , 1.05 ) ;
}
to {
transform: scale3d ( 1 , 1 , 1 ) ;
}
}
. pulse {
animation- name: pulse;
}
@keyframes rubberBand {
from {
transform: scale3d ( 1 , 1 , 1 ) ;
}
30 % {
transform: scale3d ( 1.25 , 0.75 , 1 ) ;
}
40 % {
transform: scale3d ( 0.75 , 1.25 , 1 ) ;
}
50 % {
transform: scale3d ( 1.15 , 0.85 , 1 ) ;
}
65 % {
transform: scale3d ( .95 , 1.05 , 1 ) ;
}
75 % {
transform: scale3d ( 1.05 , .95 , 1 ) ;
}
to {
transform: scale3d ( 1 , 1 , 1 ) ;
}
}
. rubberBand {
animation- name: rubberBand;
}
@keyframes shake {
from, to {
transform: translate3d ( 0 , 0 , 0 ) ;
}
10 % , 30 % , 50 % , 70 % , 90 % {
transform: translate3d ( - 10 px, 0 , 0 ) ;
}
20 % , 40 % , 60 % , 80 % {
transform: translate3d ( 10 px, 0 , 0 ) ;
}
}
. shake {
animation- name: shake;
}
@keyframes headShake {
0 % {
transform: translateX ( 0 ) ;
}
6.5 % {
transform: translateX ( - 6 px) rotateY ( - 9d eg) ;
}
18.5 % {
transform: translateX ( 5 px) rotateY ( 7d eg) ;
}
31.5 % {
transform: translateX ( - 3 px) rotateY ( - 5d eg) ;
}
43.5 % {
transform: translateX ( 2 px) rotateY ( 3d eg) ;
}
50 % {
transform: translateX ( 0 ) ;
}
}
. headShake {
animation- timing- function: ease- in- out;
animation- name: headShake;
}
@keyframes swing {
20 % {
transform: rotate3d ( 0 , 0 , 1 , 15d eg) ;
}
40 % {
transform: rotate3d ( 0 , 0 , 1 , - 10d eg) ;
}
60 % {
transform: rotate3d ( 0 , 0 , 1 , 5d eg) ;
}
80 % {
transform: rotate3d ( 0 , 0 , 1 , - 5d eg) ;
}
to {
transform: rotate3d ( 0 , 0 , 1 , 0d eg) ;
}
}
. swing {
transform- origin: top center;
animation- name: swing;
}
@keyframes tada {
from {
transform: scale3d ( 1 , 1 , 1 ) ;
}
10 % , 20 % {
transform: scale3d ( .9 , .9 , .9 ) rotate3d ( 0 , 0 , 1 , - 3d eg) ;
}
30 % , 50 % , 70 % , 90 % {
transform: scale3d ( 1.1 , 1.1 , 1.1 ) rotate3d ( 0 , 0 , 1 , 3d eg) ;
}
40 % , 60 % , 80 % {
transform: scale3d ( 1.1 , 1.1 , 1.1 ) rotate3d ( 0 , 0 , 1 , - 3d eg) ;
}
to {
transform: scale3d ( 1 , 1 , 1 ) ;
}
}
. tada {
animation- name: tada;
}
@keyframes wobble {
from {
transform: none;
}
15 % {
transform: translate3d ( - 25 % , 0 , 0 ) rotate3d ( 0 , 0 , 1 , - 5d eg) ;
}
30 % {
transform: translate3d ( 20 % , 0 , 0 ) rotate3d ( 0 , 0 , 1 , 3d eg) ;
}
45 % {
transform: translate3d ( - 15 % , 0 , 0 ) rotate3d ( 0 , 0 , 1 , - 3d eg) ;
}
60 % {
transform: translate3d ( 10 % , 0 , 0 ) rotate3d ( 0 , 0 , 1 , 2d eg) ;
}
75 % {
transform: translate3d ( - 5 % , 0 , 0 ) rotate3d ( 0 , 0 , 1 , - 1d eg) ;
}
to {
transform: none;
}
}
. wobble {
animation- name: wobble;
}
@keyframes jello {
from, 11.1 % , to {
transform: none;
}
22.2 % {
transform: skewX ( - 12.5d eg) skewY ( - 12.5d eg) ;
}
33.3 % {
transform: skewX ( 6.25d eg) skewY ( 6.25d eg) ;
}
44.4 % {
transform: skewX ( - 3.125d eg) skewY ( - 3.125d eg) ;
}
55.5 % {
transform: skewX ( 1.5625d eg