Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

What does comma mean here in CSS3, between transition and transform?

What does comma mean here in CSS3, between transition and transform?

Problem

Two questions please, as I'm new to CSS3:

1) I understand that -XXX-transtion: opacity .4s below says to Webkit and Firefox browsers: change opacity to zero over the course of 400ms. But what does the comma right afterwards mean?

opacity: 0;
-webkit-transition: opacity .4s, -webkit-transform .4s;
-moz-transition: opacity .4s, -moz-transform .4s;

2) Given the mixins.less file below, how to rewrite the above statements?

.transform(@transform) {
    -webkit-transform: @transform;
    -moz-transform: @transform;
    -ms-transform: @transform;
    -o-transform: @transform;
    transform: @transform;
}

.transition(@transition) {
    -webkit-transition: @transition;
    -moz-transition: @transition;
    -ms-transition: @transition;
    -o-transition: @transition;
    transition: @transition;
}
Problem courtesy of: Alexander Farber

Solution

The answer to your 1st question:

You can use commas in transitions to specify multiple styles for which Transition has to be applied.For eg: the line -webkit-transition: opacity .4s, -webkit-transform .4s would tell to apply the transition when opacity is being changed and when a transform is being done(can be a shape change,position change or size change depending on the type of transform)

Solution courtesy of: user700284

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

What does comma mean here in CSS3, between transition and transform?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×