/home/blackyak/www/wordpress/wp-content/themes/travivu/assets/sass/template/_effect.scss
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
@-moz-keyframes beat{0%{transform:scale(1)}50%{transform:scale(.82)}}
@-webkit-keyframes beat{0%{transform:scale(1)}50%{transform:scale(.82)}}
@keyframes beat{0%{transform:scale(1)}50%{transform:scale(.82)}}
@keyframes rotate-circle {
to {
transform: rotate(1turn);
}
}
@keyframes scaleOut {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes scaleOut2 {
0% {
transform: scale(1);
}
50% {
transform: scale(0.6);
}
}
@keyframes scaleOut3 {
0% {
transform: scale(1);
}
50% {
transform: scale(0.9);
}
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes rotation {
0% {
-moz-transform: rotate(0deg)
}
100% {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes placeHolderShimmer{
0%{
background-position:-468px 0
}
100%{
background-position:468px 0;
}
}
@keyframes placeHolderShimmer{
0%{
background-position:-468px 0
}
100%{
background-position:468px 0
}
}
@keyframes animation_top_bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes animation_top_bottom {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
50% {
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.animated-background {
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: placeHolderShimmer;
animation-timing-function: linear;
background: #f6f7f8;
background: #eeeeee;
background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eeeeee), color-stop(18%, #dddddd), color-stop(33%, #eeeeee));
background: -webkit-linear-gradient(left, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
background: linear-gradient(to right, #eeeeee 8%,#dddddd 18%,#eeeeee 33%);
background-size: 800px 104px;
height: 96px;
position: relative;
}
.background-masker {
background: #fff;
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.blur {
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
-webkit-filter: url(#blur-filter);
filter: url(#blur-filter);
-webkit-filter: blur(3px);
filter: blur(3px);
}
.blur-svg {
display: none;
}
@keyframes pulse-border {
0% {
@include transform(scale(1));
opacity: 1;
}
100% {
@include transform(scale(1.4));
opacity: 0;
}
}
@keyframes pulse-border-2 {
0% {
@include transform(scale(1));
opacity: 1;
}
100% {
@include transform(scale(1.8));
opacity: 0;
}
}
@keyframes shapeMover {
0%, 100% {
transform: perspective(200px) translateY(0) rotate(0deg) translateZ(0px) translateX(0);
}
50% {
transform: perspective(200px) rotate(0deg) translateZ(10px) translateY(10px) translateX(10px);
}
}
@-webkit-keyframes animation1 {
0%,
100% {
-webkit-transform: rotate(0deg) translateX(0);
transform: rotate(0deg) translateX(0);
}
25%,
75% {
-webkit-transform: rotate(5deg) translateX(15px);
transform: rotate(5deg) translateX(15px);
}
50% {
-webkit-transform: rotate(10deg) translateX(30px);
transform: rotate(10deg) translateX(30px);
}
}
/*** Animation 1 ***/
@-webkit-keyframes animation1 {
0%,
100% {
-webkit-transform: rotate(0deg) translateX(0);
transform: rotate(0deg) translateX(0);
}
25%,
75% {
-webkit-transform: rotate(5deg) translateX(15px);
transform: rotate(5deg) translateX(15px);
}
50% {
-webkit-transform: rotate(10deg) translateX(30px);
transform: rotate(10deg) translateX(30px);
}
}
@keyframes animation1 {
0%,
100% {
-webkit-transform: rotate(0deg) translateX(0);
transform: rotate(0deg) translateX(0);
}
25%,
75% {
-webkit-transform: rotate(5deg) translateX(15px);
transform: rotate(5deg) translateX(15px);
}
50% {
-webkit-transform: rotate(10deg) translateX(30px);
transform: rotate(10deg) translateX(30px);
}
}
/*** Animation 2 ***/
@animation2{
0%{-webkit-transform:rotateY(0deg);transform:rotateY(0deg)}
100%{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}
}
@-moz-keyframes animation2{
0%{-moz-transform:rotateY(0deg);transform:rotateY(0deg)}
100%{-moz-transform:rotateY(360deg);transform:rotateY(360deg)}
}
@-o-keyframes animation2{
0%{-o-transform:rotateY(0deg);transform:rotateY(0deg)}
100%{-o-transform:rotateY(360deg);transform:rotateY(360deg)}
}
@keyframes animation2{
0%{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg)}
100%{-webkit-transform:rotateY(360deg);-moz-transform:rotateY(360deg);-o-transform:rotateY(360deg);transform:rotateY(360deg)}
}
/*** squareMover 2 ***/
@-webkit-keyframes squareMover {
0%,
100% {
transform: translate(0, 0) rotate(0);
}
20%,
60% {
transform: translate(20px, 40px) rotate(180deg);
}
30%,
80% {
transform: translate(40px, 60px) rotate(0deg);
}
}
@keyframes squareMover {
0%,
100% {
transform: translate(0, 0) rotate(0);
}
20%,
60% {
transform: translate(20px, 40px) rotate(180deg);
}
30%,
80% {
transform: translate(40px, 60px) rotate(0deg);
}
}
.effect-shape-1{
animation-name: squareMover;
animation-duration: 10s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
perspective: 100px;
transform-origin: center center;
}
.effect-shape-2{
animation: animation1 5s ease-in infinite;
}