Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by mrx3
mrx3
8,742 Points

Can someone please check my transition shorthand to make sure it is right?

I've been practicing the transition short hand property, and I want to make sure it is correct. I've left in the standard short hand declaration so you can see what I'm trying to do.

.box {
    width: 25%;
    height: 200px;
    border-radius: 8px;
    background: #4682B4;
    transition-property: background, margin;
    transition-duration: 2s, 5s;
    transition-delay: 3s;
    transition-timing-function: linear;

    /**TRANSITION SHORT HAND BELOW**/

    transition: background 2s transition-timing function linear 3s, margin 5s;
 }

.wrap:hover .box {
    background: #F08080;
    margin-left: 75%;
 }

Thank you for any help. I'm having some difficulty with learning the shorthand transition property.

1 Answer

Wayne Priestley
Wayne Priestley
19,579 Points

Mr X,

transition: background 2s 3s linear;
transition: margin 5s 3s linear;

Hope this helps.

mrx3
mrx3
8,742 Points

So basically what you did was create two transitions for each property one for the background and one for the margin, correct? For instance the first transition with the background property. You declared the background then gave it a 2s duration, with a 3s delay, with a timing function of linear, correct?

Wayne Priestley
Wayne Priestley
19,579 Points

Yep, thats what i did.
If your unsure about them I would say stick to the long way of doing them.

Hope this helps.