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

CSS3 Transition jolting when applied to div containing HTML5 video?

CSS3 Transition jolting when applied to div containing HTML5 video?

Problem

I have a website with a setup similar to this jsfiddle the only difference really is there is a CSS3 carousel/slideshow of 4 HTML5 videos inside the main body of content.

As you can see in the fiddle the Transition is smooth however in my actual website the slide down and up is really glitchy and not smooth at all.

Any ideas why this might be happening would be greatly appreciated.

DEMO

JS

$(".contact-button").on('click', function(){
var clicked = $('#cont').attr('data-state');

if(clicked=='true')
{
$('#cont').attr('data-state','false');
$(".wrapper").css({"top": "100px", "-webkit-transition": "top 0.5s ease-in-out", "-
moz-transition": "top 0.5s ease-in-out", "-o-transition": "top 0.5s ease-in-out", "-moz-
transition": "top 0.5s ease-in-out", "transition": "top 0.5s ease-in-out"});
}else if(clicked=='false')
{
    $('#cont').attr('data-state','true');
    $(".wrapper").css({"top": "0px", "-webkit-transition": "top 0.5s ease-in-out", "-moz-
    transition": "top 0.5s ease-in-out", "-o-transition": "top 0.5s ease-in-out", "-ms-
    transition": "top 0.5s ease-in-out", "transition": "top 0.5s ease-in-out"});
}
});

$(".description-button").on('click', function(){
var clic = $('#des').attr('data-statee');
if(clic =='true')
{
    $('#des').attr('data-statee','false');
    $(".wrapper").css({"top": "-100px"});
}
if(clic =='false')
{
    $('#des').attr('data-statee','true');
    $(".wrapper").css({"top": "0px"});
}
});
Problem courtesy of: user2498890

Solution

You are animating the top property, which is a layout property. You shouldn't do this. I changed your CSS and your code, simplifying it to use CSS classes instead of hard-coded values in javascript, and now it uses CSS 3D transforms (where available), which are much quicker and hardware-accelerated. Now it should run smoothly.

Here is the updated jsfiddle.

Changes in the CSS:

.wrapper {
    position: absolute;
    background-color: red;
    width: 100%;
    height: 100%;
    max-width: 1440px;
    margin: 0;
    z-index: 1;
    -webkit-transition: -webkit-transform 0.5s ease-in-out;
    transition: transform 0.5s ease-in-out;
}


.wrapper.down
{
    -webkit-transform: translate3d(0px, 100px, 0px);
    -ms-transform: translateY(100px);
    -transform: translate3d(0px, 100px, 0px);
}

.wrapper.up
{
    -webkit-transform: translate3d(0px, -100px, 0px);
    -ms-transform: translateY(-100px);
    -transform: translate3d(0px, -100px, 0px);
}

New javascript:

$(".contact-button").on('click', function(){
   var clicked = $('#cont').attr('data-state');

    if(clicked=='true')
    {
        $('#cont').attr('data-state','false');
        $(".wrapper").removeClass('up').addClass('down');
    }else if(clicked=='false')
    {
        $('#cont').attr('data-state','true');
         
        $(".wrapper").removeClass('up down');
    }
});



$(".description-button").on('click', function(){
    var clic = $('#des').attr('data-statee');
    if(clic =='true')
    {
          $('#des').attr('data-statee','false');
        $(".wrapper").removeClass('down').addClass('up');
    }
    if(clic =='false')
    {
        $('#des').attr('data-statee','true');
        $(".wrapper").removeClass('down up');
    }
});

As you see, I've added the up and down CSS classes. Adding and removing them moves the .wrapper DIV.

Solution courtesy of: Oscar Paz

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

CSS3 Transition jolting when applied to div containing HTML5 video?

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×