why is this code not working, everything is working perfectly in the preview.

First, you only apply the -webkit-transition to the class .box

Second, you don't need a comma to separate the values of the -webkit-transition

.box { 
    background: #4682B4; 
    -webkit-border-radius: 15px; 
    border-radius: 15px; 
    -webkit-transition-duration: 5s; 
    transition-duration: 5s; 
}

.box:hover {
    background: #F08080; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    -webkit-transition: border-radius 2s linear 1s;  /* This line was not written correctly */
    transition: border-radius 2s linear 1s; 
}

If you're adding browser prefixes you should keep things consistent and add them to all css3 attributes, but Sreng is right that the hover transition was written incorrectly.

Thank You Jeremy and Sreng, I made the changes that you both suggested however, it's still not working for me. I think I am going to contact support. Thanks again for your help.

• Jon

Jeremy,

Here are the coding instructions:

Using the prefix for WebKit-based browsers, create a transition for the border-radius property of .box. Give the transition a duration of 2 seconds, a delay of 1 second, and a timing function that maintains a linear motion.

I haven't taken any CSS tracks here, so I'm not sure what they expect of the user.

-webkit-transition: border-radius 2s linear 1s; <-- is correct, but maybe they want it written out like this...?

.box {
  -webkit-transition: border-radius;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  -webkit-transition-delay: 1s;
}