💄 🐛 Fixed the comment component animation style.
This commit is contained in:
凡梦星尘
176
assets/css/_common/scaffolding/animation/hover.scss
Normal file
176
assets/css/_common/scaffolding/animation/hover.scss
Normal file
@@ -0,0 +1,176 @@
|
||||
/** Animation for link hover style */
|
||||
|
||||
@keyframes wobble-vertical {
|
||||
16.65% {
|
||||
transform: translateX(8px);
|
||||
}
|
||||
|
||||
33.3% {
|
||||
transform: translateX(-6px);
|
||||
}
|
||||
|
||||
49.95% {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
66.6% {
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
83.25% {
|
||||
transform: translateX(1px);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Icon Pulse */
|
||||
@-webkit-keyframes hvr-icon-pulse {
|
||||
25% {
|
||||
-webkit-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
@keyframes hvr-icon-pulse {
|
||||
25% {
|
||||
-webkit-transform: scale(1.3);
|
||||
transform: scale(1.3);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
}
|
||||
.hvr-icon-pulse {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
}
|
||||
.hvr-icon-pulse .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-pulse;
|
||||
animation-name: hvr-icon-pulse;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
/* Bounce To Right */
|
||||
.hvr-bounce-to-right {
|
||||
background: var(--btn-default-bg);
|
||||
border: 2px solid var(--btn-default-border-color);
|
||||
border-radius: 2px;
|
||||
color: var(--btn-default-color);
|
||||
display: inline-block;
|
||||
font-size: 0.875em;
|
||||
line-height: 2;
|
||||
padding: 0 20px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-property: color;
|
||||
transition-property: color;
|
||||
-webkit-transition-duration: 0.5s;
|
||||
transition-duration: 0.5s;
|
||||
}
|
||||
.hvr-bounce-to-right:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--btn-default-hover-bg);
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transform-origin: 0 50%;
|
||||
transform-origin: 0 50%;
|
||||
-webkit-transition-property: transform;
|
||||
transition-property: transform;
|
||||
-webkit-transition-duration: 0.5s;
|
||||
transition-duration: 0.5s;
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-bounce-to-right:hover, .hvr-bounce-to-right:focus, .hvr-bounce-to-right:active {
|
||||
background: var(--btn-default-bg);
|
||||
border-color: var(--btn-default-hover-border-color);
|
||||
color: var(--btn-default-hover-color);
|
||||
}
|
||||
.hvr-bounce-to-right:hover:before, .hvr-bounce-to-right:focus:before, .hvr-bounce-to-right:active:before {
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
|
||||
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
|
||||
}
|
||||
|
||||
/* Shutter Out Horizontal */
|
||||
.hvr-shutter-out-horizontal {
|
||||
background: var(--btn-default-bg);
|
||||
border: 2px solid var(--btn-default-border-color);
|
||||
border-radius: 2px;
|
||||
color: var(--btn-default-color);
|
||||
display: inline-block;
|
||||
font-size: 0.875em;
|
||||
line-height: 2;
|
||||
padding: 0 20px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-property: color;
|
||||
transition-property: color;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-shutter-out-horizontal:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: var(--btn-default-hover-bg);
|
||||
-webkit-transform: scaleX(0);
|
||||
transform: scaleX(0);
|
||||
-webkit-transform-origin: 50%;
|
||||
transform-origin: 50%;
|
||||
-webkit-transition-property: transform;
|
||||
transition-property: transform;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-shutter-out-horizontal:hover, .hvr-shutter-out-horizontal:focus, .hvr-shutter-out-horizontal:active {
|
||||
background: var(--btn-default-bg);
|
||||
border-color: var(--btn-default-hover-border-color);
|
||||
color: var(--btn-default-hover-color);
|
||||
}
|
||||
.hvr-shutter-out-horizontal:hover:before, .hvr-shutter-out-horizontal:focus:before, .hvr-shutter-out-horizontal:active:before {
|
||||
-webkit-transform: scaleX(1);
|
||||
transform: scaleX(1);
|
||||
}
|
||||
2
assets/css/_common/scaffolding/animation/index.scss
Normal file
2
assets/css/_common/scaffolding/animation/index.scss
Normal file
@@ -0,0 +1,2 @@
|
||||
@import 'show';
|
||||
@import 'hover';
|
||||
65
assets/css/_common/scaffolding/animation/show.scss
Normal file
65
assets/css/_common/scaffolding/animation/show.scss
Normal file
@@ -0,0 +1,65 @@
|
||||
// tabshow animation
|
||||
@-moz-keyframes tabshow {
|
||||
0% {
|
||||
-webkit-transform: translateY(15px);
|
||||
-moz-transform: translateY(15px);
|
||||
-o-transform: translateY(15px);
|
||||
-ms-transform: translateY(15px);
|
||||
transform: translateY(15px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes tabshow {
|
||||
0% {
|
||||
-webkit-transform: translateY(15px);
|
||||
-moz-transform: translateY(15px);
|
||||
-o-transform: translateY(15px);
|
||||
-ms-transform: translateY(15px);
|
||||
transform: translateY(15px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@-o-keyframes tabshow {
|
||||
0% {
|
||||
-webkit-transform: translateY(15px);
|
||||
-moz-transform: translateY(15px);
|
||||
-o-transform: translateY(15px);
|
||||
-ms-transform: translateY(15px);
|
||||
transform: translateY(15px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@keyframes tabshow {
|
||||
0% {
|
||||
-webkit-transform: translateY(15px);
|
||||
-moz-transform: translateY(15px);
|
||||
-o-transform: translateY(15px);
|
||||
-ms-transform: translateY(15px);
|
||||
transform: translateY(15px);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: translateY(0);
|
||||
-moz-transform: translateY(0);
|
||||
-o-transform: translateY(0);
|
||||
-ms-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@@ -11,3 +11,4 @@
|
||||
@import 'pagination';
|
||||
@import 'comments';
|
||||
@import 'fontawesome';
|
||||
@import 'animation';
|
||||
|
||||
Reference in New Issue
Block a user