CSS transition causes lag

Question

The transition inside of the box class causes the jQuery to lag, however if the page is refreshed a few times the lag will not appear. If you remove the transition, the lag will not appear at all, any way of keeping the CSS transition without the initial lag?

JSFIDDLE

CSS:

html {
    background:url("http://www.phactr.com/css/img/background.jpg");
}
.box {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(100%, rgba(0, 0, 0, 0)));
    /* Chrome,Safari4+ */
    width: 230px;
    height: 230px;
    border-radius: 100%;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.7);
    transition: .33s ease; 
}
.box:hover {
    width: 250px;
    height: 250px;
}
.over {
    -webkit-filter: blur(3px) opacity(0.3);
}

JQUERY:

$(document).ready(function () {
    $("#one").click(function () {
        setTimeout(function () {
            $("#one, #two, #three").addClass("over", "blind");
        }, 10);
    });    
});

Answer 1

You can do this to prevent the transition when clicked but note that this will disable the transition when hovered again with the over class.

.over {
    transition: none;
    -webkit-filter: blur(3px) opacity(0.3);
}

To keep the transition, you could do

$(document).ready(function () {
    $("#one").click(function () {
        setTimeout(function () {
            $("#one, #two, #three").addClass("over", "blind").show().delay(100).css('transition', '0.33s ease');
        }, 10);
    });
});

http://jsfiddle.net/Ukx4u/165/

The .show() is used to 'animated' then the delay and update transition. I am not unsure why you have the timeout function, it can be removed if it is not doing something I don't know of. I left it in because you had it in the original code