CODEWITHSUNDEEP
javascriptcsscss-transformsperspective
EasyBB
EasyBB

Reputation: 6574

CSS3 Animation conflicting with click

So I have an animation that starts if the input is clicked, it's sort of the Windows 8 animation when you long press or right click.

My JS:

$("body").on('click',function(e){
    if($(e.target).closest(".img_list")){
        var inp = $(e.target).closest(".img_list").find("input")[0];
        if(inp.checked){
            $(e.target).closest(".img_list").addClass("clicked tilting");
        }else{
            $(e.target).closest(".img_list").removeClass("clicked tilting");
        }
    }
});

And the CSS of the toggled class:

@keyframes tilter{
    0%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
        transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
    }
    25%{
-webkit-transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
        transform: perspective(320px) rotate3d(0, 1, 0, 8deg);        
    }
    50%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
        transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
    }
    75%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
        transform: perspective(320px) rotate3d(0, 1, 0, 8deg);
    }
    100%{
        -webkit-transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
        transform: perspective(320px) rotate3d(0, 1, 0, -8deg);
    }        
}

But it's conflicting with my click event, for some reason the target is not there when I click.

It's hard to explain so I wrote a fiddle for you here if you click like a madman you'll eventually see this happen. It also has my original code which was easier than this, and cleaner.

Can someone explain to me as to why this is a conflict?

Upvotes: 2

Views: 325

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25994

First some notes about your CSS in general:

  • Only put the prefixes of the vendor inside of the prefixed keyframe animation, meaning only -webkit-transform in your @-webkit-keyframes etc.
  • You can reuse a keyframe by separating the values by a comma, so you can have 0%, 50%, 100% { ... do something ... } instead of having three separate ones
  • Since you're not viewing the back at all, backface-visibility is not needed. On the same note, visible is the default value so you don't have to state it most of the time
  • Avoid !importants as they are hard to change later. Always opt for using selector specificity over them
  • Always put the unprefixed properties after the prefixed ones, so -webkit-animation should come before animation because you want things to be as standard across browsers as possible
  • Try to keep your code clean looking, it really does help later on and also helps others working with you or after you

Now for your actual problem:

The perspectivefunction is only supported in Webkit browsers. The perspective function is the one inside of a transform, like so: -webkit-transform: perspective(n)

As a result, you should apply perspective by instead using the perspective property on the parent instead. In this case that would mean the body element, but a more specific parent would generally be better.

Here's a cleaned up version of your code with it working

As KingKing noted in his comment below, you can also fix this by applying perspective(0) rotate3d(0,1,0,0) on the parent. Demo of that, but it's more preferable to use the more standard perspective property.

For others looking later, your problem may not be exactly the same. Most CSS rendering issues are caused by the lack of hardware acceleration, which you can force using transform: translateZ(1px) (with prefix) or in the future by using the will-change property

Upvotes: 1

Related Questions