Fun with transition
transition
Hover over the purple rectangle to see it grow
I grow on hover!
.example{
/* The property you want to transition */
transition-property: width;
/* How long you want the transition to take */
transition-duration: .5s;
/* linear | ease-in | ease-out | ease-in-out */
transition-timing-function: linear;
}
Hover over the purple rectangle to see it rotate
I rotate on hover!
.example{
transform: rotate(0deg);
background: grey;
/* transition can be written in shorthand format */
/* transition-property transition-duration transition-timing-property */
transition: transform .5s ease-in-out;
}
.example:hover{
transform: rotate(360deg);
}
Click on the wheel to see it move and spin.
Click the wheel!
.example{
border-radius: 50%;
margin-left: -1.25rem;
transform: rotate(0deg);
background: blue;
/* Transition multiple properties at the same time */
transition: transform .5s ease-in-out, margin-left .5s ease-in-out;
}
.example:active{
margin-left: 40rem;
transform: rotate(360deg);
}