CSS Unused CSS Stages Transitions and Transforms Transitions - WebKit Only

Devin Scheu
Devin Scheu
66,191 Points

Help With CSS Transitions

Here's the question: 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.

Here's my code:

.box {

    border-radius: 15px;

    background: #4682B4;

 }


.box:hover{

    background: #F08080;

    border-radius: 50%;

  -webkit-transition-property: border-radius;

  -webkit-transition-duration: 2s;

  -webkit-transition-delay: 1s;

}

1 Answer

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

You can also use the shorthand:

.box {
-webkit-transition: border-radius 2s 1s linear;
}