Transitions Part 2: Create a border-radius transition for box, with 2s duration, 1s delay, and linear timing function

Question

Create a border-radius transition for box, with 2s duration, 1s delay, and linear timing function.
I believe I have all the right code, but I may have them in the wrong areas, could anyone help me with this?
.box {
    border-radius: 15px;
    background: #4682B4;
        transition-delay: 1s;
 }
.box:hover {
    background: #F08080;
    border-radius: 50%;
  transition-property: border-radius;
  transition-timing-function: linear;
  transition-duration: 2s;
}

Brian Becker · Answer

Here we are!
```css
.box {
    border-radius: 15px;
    background: #4682B4;
     -webkit-transition: border-radius 2s linear 1s;
 }
.box:hover {
    background: #F08080;
    border-radius: 50%;
}            
```

Jonathan Grieve · Answer

I believe you need to include transition duration values in both the original and the hover state of your box element,
So something like this,
```css
.box { border-radius: 15px;  transition-duration: 2s; background: #4682B4; transition-delay: 1s; }
.box:hover { background: #F08080; border-radius: 50%; transition-property: border-radius; transition-timing-function: linear; transition-duration: 2s; }
```

Welcome to the Treehouse Community

Looking to learn something new?

Alexander Fisher

Alexander Fisher

Transitions Part 2: Create a border-radius transition for box, with 2s duration, 1s delay, and linear timing function

2 Answers

Jonathan Grieve

Jonathan Grieve

Brian Becker

Brian Becker