This works with js funciton from advantage-base.js check_if_in_view() please see for more details.
*/
.fade-in,
.fade-in.in-view { animation: fadein 2s; -moz-animation: fadein 2s; -webkit-animation: fadein 2s; -o-animation: fadein 2s; }
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein { /* Firefox */
from { opacity: 0; }
to { opacity: 1; }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from { opacity: 0; }
to { opacity: 1; }
}
@-o-keyframes fadein { /* Opera */
from { opacity: 0; }
to { opacity: 1; }
}
.animate { opacity: 0 }
.animate.in-view { opacity: 1 }
/*
[//]: # (Bounce in animation : AnimateSelect choice in Dialog)
[//]: # (*************)
Use:
)
This works with js funciton from advantage-base.js check_if_in_view() please ssee for more details.
*/
.animate.bounce-in.in-view { -webkit-animation: bounceIn 1s; -moz-animation: bounceIn 1s; animation: bounceIn 1s; }
@-webkit-keyframes bounceIn {
0%,100%,20%,40%,60%,80% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1); }
0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3); }
20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1); }
40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9); }
60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03); }
80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97); }
100% { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}
@-moz-keyframes bounceIn {
0%,100%,20%,40%,60%,80% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1); }
0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3); }
20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1); }
40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9); }
60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03); }
80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97); }
100% { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}
@keyframes bounceIn {
0%,100%,20%,40%,60%,80% { -webkit-animation-timing-function: cubic-bezier(0.215,.61,.355,1); animation-timing-function: cubic-bezier(0.215,.61,.355,1); }
0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3); }
20% { -webkit-transform: scale3d(1.1,1.1,1.1); transform: scale3d(1.1,1.1,1.1); }
40% { -webkit-transform: scale3d(.9,.9,.9); transform: scale3d(.9,.9,.9); }
60% { opacity: 1; -webkit-transform: scale3d(1.03,1.03,1.03); transform: scale3d(1.03,1.03,1.03); }
80% { -webkit-transform: scale3d(.97,.97,.97); transform: scale3d(.97,.97,.97); }
100% { opacity: 1; -webkit-transform: scale3d(1,1,1); transform: scale3d(1,1,1); }
}
.animate.zoomIn.in-view {-webkit-animation-name: zoomIn; animation-name: zoomIn; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both}
/*
[//]: # (Zoom in animation : AnimateSelect choice in Dialog)
[//]: # (*************)
Use: div class="span-3 span-6-sm col-sm-3 col-xs-3 animate zoomIn">
This works with js funciton from advantage-base.js check_if_in_view() please ssee for more details.
*/
@-webkit-keyframes zoomIn {
0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3); }
50% { opacity: 1; }
}
@keyframes zoomIn {
0% { opacity: 0; -webkit-transform: scale3d(.3,.3,.3); transform: scale3d(.3,.3,.3); }
50% { opacity: 1; }
}
/*
[//]: # (Bouce up and down animation : AnimateSelect choice in Dialog)
[//]: # (*************)
up animation Use:
Down animation Use:
This works with js funciton from advantage-base.js check_if_in_view() please ssee for more details.
*/
.animate.bounce-up { -moz-transition: all 500ms ease-out; -webkit-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; -moz-transform: translate3d(0px, 100px, 0px); -webkit-transform: translate3d(0px, 100px, 0px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); transform: translate3d(0px, 100, 0px); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
.animate.bounce-up.in-view { -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px); }
.animate.bounce-down { -moz-transition: all 500ms ease-out; -webkit-transition: all 500ms ease-out; -o-transition: all 500ms ease-out; transition: all 500ms ease-out; -moz-transform: translate3d(0px, -100px, 0px); -webkit-transform: translate3d(0px, -100px, 0px); -o-transform: translate(0px, -100px); -ms-transform: translate(0px, -100px); transform: translate3d(0px, -100, 0px); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; }
.animate.bounce-down.in-view { -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px); }
/*
[//]: # (Transition delay)
[//]: # (*****************)
*/
.bounce-down:nth-child(1), .bounce-up:nth-child(1), .bounce-down[data-delay="1"], .bounce-up[data-delay="1"] { -webkit-transition-delay: .15s !important; transition-delay: .15s !important; }
.bounce-down:nth-child(2), .bounce-up:nth-child(2), .bounce-down[data-delay="2"], .bounce-up[data-delay="2"] { -webkit-transition-delay: .3s !important; transition-delay: .3s !important; }
.bounce-down:nth-child(3), .bounce-up:nth-child(3), .bounce-down[data-delay="3"], .bounce-up[data-delay="3"] { -webkit-transition-delay: .45s !important; transition-delay: .45s !important; }
.bounce-down:nth-child(4), .bounce-up:nth-child(4), .bounce-down[data-delay="4"], .bounce-up[data-delay="4"] { -webkit-transition-delay: .6s !important; transition-delay: .6s !important; }
.bounce-down:nth-child(5), .bounce-up:nth-child(5), .bounce-down[data-delay="5"], .bounce-up[data-delay="5"] { -webkit-transition-delay: .75s !important; transition-delay: .75s !important; }
.bounce-down:nth-child(6), .bounce-up:nth-child(6), .bounce-down[data-delay="6"], .bounce-up[data-delay="6"] { -webkit-transition-delay: .9s !important; transition-delay: .9s !important; }
.bounce-down:nth-child(7), .bounce-up:nth-child(7), .bounce-down[data-delay="7"], .bounce-up[data-delay="7"] { -webkit-transition-delay: 1.05s !important; transition-delay: 1.05s !important; }
.bounce-down:nth-child(8), .bounce-up:nth-child(8), .bounce-down[data-delay="8"], .bounce-up[data-delay="8"] { -webkit-transition-delay: 1.2s !important; transition-delay: 1.2s !important; }
.bounce-down:nth-child(9), .bounce-up:nth-child(9), .bounce-down[data-delay="9"], .bounce-up[data-delay="9"] { -webkit-transition-delay: 1.35s !important; transition-delay: 1.35s !important; }
.bounce-down:nth-child(10), .bounce-up:nth-child(10), .bounce-down[data-delay="10"], .bounce-up[data-delay="10"] { -webkit-transition-delay: 1.5s !important; transition-delay: 1.5s !important; }
.bounce-down:nth-child(11), .bounce-up:nth-child(11), .bounce-down[data-delay="11"], .bounce-up[data-delay="11"] { -webkit-transition-delay: 1.65s !important; transition-delay: 1.65s !important; }
.bounce-down:nth-child(12), .bounce-up:nth-child(12), .bounce-down[data-delay="12"], .bounce-up[data-delay="12"] { -webkit-transition-delay: 1.8s !important; transition-delay: 1.8s !important; }
/*
[//]: # (Slider-x Use: please see flyoutNavigation.ascx)
LAWRY DOCUMENT
*/
.slider-x { transform: translateX(100vw); -webkit-transform: translateX(100vw); }
.slide-in-x { animation: slide-in 0.5s forwards; -webkit-animation: slide-in 0.5s forwards; }
.slide-out-x { animation: slide-out 0.5s forwards; -webkit-animation: slide-out 0.5s forwards; }
@keyframes slide-in {
100% { transform: translateX(0%); }
}
@-webkit-keyframes slide-in {
100% { -webkit-transform: translateX(0%); }
}
@keyframes slide-out {
0% { transform: translateX(0%); }
100% { transform: translateX(100vw); }
}
@-webkit-keyframes slide-out {
0% { -webkit-transform: translateX(0%); }
100% { -webkit-transform: translateX(100vw); }
}
