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

Pure CSS3 Star Wars Lightsaber Checkboxes.
208 stars 20 forks source link

Light sabers only work in Chrome #1

Closed Skateside closed 11 years ago

Skateside commented 11 years ago

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

whatnickcodes commented 11 years ago

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);
}
Skateside commented 11 years ago

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.

whatnickcodes commented 11 years ago

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