Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

Problem

I need to override the default slide effect to dissolve effect.

When changePage function is called I need to slowly dissolve the current page to new page.

I tried with following CSS

@keyframes dissolve {
    0% { opacity:1; }
    5% { opacity:0.9;}
    15% { opacity:0.7;}
    25% { opacity:0.5;}
    35% { opacity:0.3;}
    45% { opacity:0;}
    55% { opacity:0.2;}
    65% { opacity:0.4;}
    75% { opacity:0.6;}
    85% { opacity:0.8;}
    95% { opacity:0.9;}
    100% { opacity:1;}
}
.in, .out, .slide.in, .slide.out, .slide.out.reverse, .slide.in.reverse {
    -webkit-animation-name: dissolve;
    -moz-animation-name: dissolve;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 350ms;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-duration: 350ms

}

I have created a fiddle with above css.

The page transistion is not smooth with above code.

How to correct page transistion to run smoothly?

Problem courtesy of: Justin John

Solution

I have obtained dissolve effect by css using keyframes and overriding the CSS of jQuery Mobile.

Please add @-webkit-keyframes ,@-moz-keyframes, and @-o-keyframes in CSS like @keyframes added below.

@keyframes dissolve-out {
    0% { opacity: 1; }
    20% { opacity: 0.5; }
    40% { opacity: 0.2; }
    60% { opacity: 0; }
    80% { opacity: 0; }
    100% { opacity: 0; }
}
@keyframes dissolve-in {
    0% { opacity: 0; }
    20% { opacity: 0; }
    40% { opacity: 0; }
    60% { opacity: 0.2; }
    80% { opacity: 0.6; }
    100% { opacity: 1; }
}

.slideup.in, .slide.in, .slide.in.reverse {
    -webkit-animation: dissolve-in;
    -moz-animation: dissolve-in;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 3s !important;
    -moz-animation-duration:3s !important;
}
.slide.out, .slide.out.reverse {
    -webkit-transform: translateX(0%);
    -webkit-animation: dissolve-out;
    -moz-transform: translateX(0%);
    -moz-animation: dissolve-out;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-timing-function: ease-in-out;
    -webkit-animation-duration: 3s !important;
    -moz-animation-duration:3s !important;
}

Please see the demo.

Above CSS will give you a dissolve effect with overriding the default slide effect of page transistion in jQuery Mobile.

Solution courtesy of: Justin John

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to override the slide effect to dissolve effect in JQuery Mobile using CSS3 feautures?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×