Some CSS code in Genesis that I don't understand

[endolil]

Hi there,

I just came across some CSS code in the Genesis theme that I don't quite understand in its purpose.

a,
input:focus,
input[type="button"],
input[type="reset"],
input[type="submit"],
textarea:focus,
.gallery img {
	-webkit-transition: all 0.1s ease-in-out;
	-moz-transition:    all 0.1s ease-in-out;
	-ms-transition:     all 0.1s ease-in-out;
	-o-transition:      all 0.1s ease-in-out;
	transition:         all 0.1s ease-in-out;
}

Could possible somebody here enlighten me?
I mean I understand that this is CSS3 and related to some effects that are applied to probably :hover rules or something but why is this a kinda standard for all these elements in Genesis. What does it do and why is it "good"?
Or is it just some fluff that I can delete and the difference will not even be noticeable?

Warm regards,
Sebastian

[brock]

I don't know what theme you are using but they are CSS transitions. You can read more about them and see examples here. I think they are creating a gliding effect on form elements, links, and images within a gallery somewhere. After you see some examples on that link, I'm sure you can spot them. Their purpose is aesthetic. I hope this helps a little.

[endolil]

Thanks Brock,

the keywords were " Their purpose is aesthetic." ...
I think so. It makes sense.

I am building my own theme based on Genesis and I don't need these little extras since I started using AnimateCSS, which is really cool, especially in combination with jQuery (events).

So I will just delete this fluff from my child's theme style.css and save some bytes. 😀

Thanks again!

[Author]

Posts