Código:
div.Ejemplo1{
text-align: center;
width: 200px;
height: 200px;
background-color: orangered;
color: aqua;
font-size: 20px;
left: 150px;
top: 160px;
position:absolute;
transition-property: width height background-color font-size left top transform color;
transition-duration: 1.5s;
transition-timing-function: ease-in-out;
transition-delay: 0.5s;
}
div.Ejemplo1:hover{
transform: rotate(270deg);
width: 100px;
height: 100px;
background-color: yellow;
color: blue;
font-size: 18px;
left: 150px;
top: 125px;
position: absolute;
transition-property: width height background-color font-size left top transform color;
transition-duration: 1.5s;
transition-timing-function: ease-in-out;
}
Código:
div.Ejemplo2{
text-align: center;
width: 200px;
height: 200px;
background-color: cyan;
color: red;
font-size: 20px;
left: 150px;
top: 420px;
position:absolute;
transition-property: width height background-color font-size left top color;
transition-duration: 1.5s;
transition-timing-function: steps(3, end);
transition-delay: 0.5s;
}
div.Ejemplo2:hover{
cursor: crosshair;
width: 120px;
height: 120px;
background-color: blue;
color: yellow;
font-size: 18px;
left: 300px;
top: 450px;
position: absolute;
transition-property: width height background-color font-size left top color;
transition-duration: 1s;
transition-timing-function: steps(5, end);
}