div.clase1 {
  width: 100px;
  height: 100px;
  background: rgb(0, 140, 255);
  transition: width 2s;
  border: 2PX SOLID slateblue;
}

.clase1:hover {
  width: 300px;
}

div.clase2 {
  width: 100px;
  height: 100px;
  background: rgb(0, 140, 255);
  transition: width 2s, height 5s;
  border: 2PX SOLID slateblue;
}

.clase2:hover {
width: 300px;
  height: 300px;
}

div.clase3 {
  width: 100px;
  height: 100px;
  background: rgb(0, 140, 255);
  transition: width 2s;
  border: 2PX SOLID rgb(33, 0, 250);
}
.clase3:hover {
width: 300px;
}
div.clase4 {
  width: 100px;
  height: 100px;
  background: rgb(0, 140, 255);
  transition: width 2s;
  border: 2PX SOLID rgb(33, 0, 250);
}
.clase4:hover {
width: 300px;
}
div.clase5 {
  width: 100px;
  height: 100px;
  background: rgb(0, 140, 255);
  transition: width 2s;
  border: 2PX SOLID rgb(33, 0, 250);
}
.clase5:hover {
width: 300px;
}
div.clase6 {
  width: 100px;
  height: 100px;
  background: rgb(0, 140, 255);
  transition: width 2s;
  border: 2PX SOLID rgb(33, 0, 250);
}
.clase6:hover {
width: 300px;
}

div.clase7 {
  width: 100px;
  height: 100px;
  background: rgb(0, 140, 255);
  transition: width 2s;
  border: 2PX SOLID rgb(33, 0, 250);
}
.clase7:hover {
width: 300px;
}

div.clase8 {
  width: 100px;
  height: 100px;
  background: rgb(0, 140, 255);
  transition: width 2s;
  border: 2PX SOLID rgb(33, 0, 250);
  transition-delay: 1s;
}
.clase8:hover {
width: 300px;
}

div.clase9 {
  width: 100px;
  height: 100px;
  background: rgb(0, 140, 255);
  transition: width 2s, height 2s, transform 2s;
  border: 2PX SOLID rgb(33, 0, 250);
 
}
.clase9:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

div.clase10 {
  width: 100px;
  height: 100px;
  background: rgb(0, 140, 255);
  border: 2PX SOLID rgb(33, 0, 250);
 transition-property: width;
  transition-duration: 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}
.clase10:hover {
width: 300px;
}

div.clase11{
  width: 100px;
  height: 100px;
  background: rgb(0, 140, 255);
  border: 2PX SOLID rgb(33, 0, 250);
  transition: width 2s linear 1s;
}
.clase11:hover {
width: 300px;
}


.clase3 {transition-timing-function: linear;}
.clase4 {transition-timing-function: ease;}
.clase5 {transition-timing-function: ease-in;}
.clase6{transition-timing-function: ease-out;}
.clase7{transition-timing-function: ease-in-out;}