scotch-io/Pure-CSS3-Star-Wars-Lightsaber-Checkboxes

Light sabers only work in Chrome

Skateside opened this issue · 3 comments

Just a quick one, but the light sabers only work in Webkit browsers. You need to update the keyframes to remove the -webkit- prefix in the moz, ms and o keyframe rules

Thanks for that. Fixed. Probably won't be spending too much more time on this. Any ideas why the transition isn't working in FF?

.lightsaber .plasma {
    transition: height 300ms,;
    -moz-transition: height 300ms;
    -webkit-transition: height 300ms;
    -o-transition: height 300ms;
    -ms-transition: height 300ms;
    border-radius: 12px 12px 0 0;
    position: absolute;
    bottom: 55px;
    left: 2px;
    width: 10px;
    display: block;
    filter: blur(1px);
    -moz-filter: blur(1px);
    -webkit-filter: blur(1px);
    -o-filter: blur(1px);
    -ms-filter: blur(1px);
}

It looks like FF needs height: 0; set in the .lightsaber .plasma rule so it has something to animate from/to. Adding it seems to get the animations working properly.

Thanks. I put a mention to your Github in the repo