Cacher is the code snippet organizer for pro developers

div.box {
  width: 100px;
  height: 100px;
  background-color: aqua;
  transition: width 2s ease-in-out 1s;
  /*
  transition: width 1s ease-in;
  transition: width 2s, height 2s;
  */
}

div.box:hover {
  width: 200px;
}

/* ANIMACJE */

@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

div {
  width: 100px;
  height: 100px;
  background: red;
  position :relative;
  -webkit-animation: mymove 5s infinite; /* Safari 4.0 - 8.0 */
  animation: mymove 5s infinite;
}

@keyframe colorswitch {
  from {background-color: red; width: 100px;}
  to {background-color: green; width: 200px;}
}

div.colorswap {
  width: 100px;
  height: 100px;
  background: red;
  animation-name: colorswitch;
  animation-duration: 4s;
}

@keyframe colorswitch {
  0% {background-color: red; width: 100px;}
  50% {background-color: yellow; width: 100px;}
  100% {background-color: green; width: 200px;}
}