| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282 |
- /* CSS Animations */
- .wpb_animate_when_almost_visible {
- .opacity(0);
- }
- .wpb_animate_when_almost_visible:not(.wpb_start_animation) {
- .animation(none)
- }
- .wpb_top-to-bottom, .top-to-bottom {
- .animation(wpb_ttb 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
- }
- .wpb_bottom-to-top, .bottom-to-top {
- .animation(wpb_btt 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
- }
- .wpb_left-to-right, .left-to-right {
- .animation(wpb_ltr 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
- }
- .wpb_right-to-left, .right-to-left {
- .animation(wpb_rtl 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
- }
- .wpb_appear, .appear {
- .animation(wpb_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
- .scale(1);
- }
- .wpb_start_animation {
- .opacity(1);
- }
- /* Top to bottom keyframes */
- @-webkit-keyframes wpb_ttb {
- 0% {
- -webkit-transform: translate(0, -10%);
- .opacity(0);
- }
- 100% {
- -webkit-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @-moz-keyframes wpb_ttb {
- 0% {
- -moz-transform: translate(0, -10%);
- .opacity(0);
- }
- 100% {
- -moz-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @-o-keyframes wpb_ttb {
- 0% {
- -o-transform: translate(0, -10%);
- .opacity(0);
- }
- 100% {
- -o-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @keyframes wpb_ttb {
- 0% {
- .translate(0, -10%);
- .opacity(0);
- }
- 100% {
- .translate(0, 0);
- .opacity(1);
- }
- }
- /* Bottom to top keyframes */
- @-webkit-keyframes wpb_btt {
- 0% {
- -webkit-transform: translate(0, 10%);
- .opacity(0);
- }
- 100% {
- -webkit-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @-moz-keyframes wpb_btt {
- 0% {
- -moz-transform: translate(0, 10%);
- .opacity(0);
- }
- 100% {
- -moz-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @-o-keyframes wpb_btt {
- 0% {
- -o-transform: translate(0, 10%);
- .opacity(0);
- }
- 100% {
- -o-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @keyframes wpb_btt {
- 0% {
- .translate(0, 10%);
- .opacity(0);
- }
- 100% {
- .translate(0, 0);
- .opacity(1);
- }
- }
- /* Left to right keyframes */
- @-webkit-keyframes wpb_ltr {
- 0% {
- -webkit-transform: translate(-10%, 0);
- .opacity(0);
- }
- 100% {
- -webkit-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @-moz-keyframes wpb_ltr {
- 0% {
- -moz-transform: translate(-10%, 0);
- .opacity(0);
- }
- 100% {
- -moz-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @-o-keyframes wpb_ltr {
- 0% {
- -o-transform: translate(-10%, 0);
- .opacity(0);
- }
- 100% {
- -o-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @keyframes wpb_ltr {
- 0% {
- .translate(-10%, 0);
- .opacity(0);
- }
- 100% {
- .translate(0, 0);
- .opacity(1);
- }
- }
- /* Right to left keyframes */
- @-webkit-keyframes wpb_rtl {
- 0% {
- -webkit-transform: translate(10%, 0);
- .opacity(0);
- }
- 100% {
- -webkit-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @-moz-keyframes wpb_rtl {
- 0% {
- -moz-transform: translate(10%, 0);
- .opacity(0);
- }
- 100% {
- -moz-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @-o-keyframes wpb_rtl {
- 0% {
- -o-transform: translate(10%, 0);
- .opacity(0);
- }
- 100% {
- -o-transform: translate(0, 0);
- .opacity(1);
- }
- }
- @keyframes wpb_rtl {
- 0% {
- .translate(10%, 0);
- .opacity(0);
- }
- 100% {
- .translate(0, 0);
- .opacity(1);
- }
- }
- /* Appear from center keyframes */
- @-webkit-keyframes wpb_appear {
- 0% {
- -webkit-transform: scale(0.5);
- .opacity(0.1);
- }
- 100% {
- -webkit-transform: scale(1);
- .opacity(1);
- }
- }
- @-moz-keyframes wpb_appear {
- 0% {
- -moz-transform: scale(0.5);
- .opacity(0.1);
- }
- 100% {
- -moz-transform: scale(1);
- .opacity(1);
- }
- }
- @-o-keyframes wpb_appear {
- 0% {
- -o-transform: scale(0.5);
- .opacity(0.1);
- }
- 100% {
- -o-transform: scale(1);
- .opacity(1);
- }
- }
- @keyframes wpb_appear {
- 0% {
- .scale(0.5);
- .opacity(0.1);
- }
- 100% {
- .scale(1);
- .opacity(1);
- }
- }
- .vc-spinner {
- &::before {
- content: '';
- width: 16px;
- height: 16px;
- display: inline-block;
- pointer-events: none;
- margin-top: 6px;
- background: url('../images/spinner.gif') no-repeat;
- background-position-x: center;
- background-position-y: center;
- }
- &.vc-spinner-complete {
- &::before {
- background-image: url('../vc/tick.png');
- }
- }
- &.vc-spinner-failed {
- &::before {
- background-image: url('../vc/remove.png');
- }
- }
- }
|