Transition mithilfe CSS3

.box {
  width: 200px;
  height: 200px;
  background: yellow;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  transition: background-color 2s ease-out;
}

.box:hover {
   background-color: purple;
}

.box2 {
  width: 200px;
  height: 200px;
  background: yellow;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  transition: all 3s;
}
.box2:hover{       
    transform: translate(50%) rotate(135deg) scale(0.5)
}

Animation in CSS3

.box3{
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example;
    animation-duration: 5s;
    animation-iteration-count: infinite
}

@keyframes example {
    from {background-color: red;}
    to {background-color: green;}
}

.box4
{
    width: 100px;
    height: 100px;
    background-color: red;
    animation-name: example2;
    animation-duration: 5s;
    animation-iteration-count: infinite
    animation-direction: alternate;
}

@keyframes example2 {
    0%   {background-color: red;}
    25%  {background-color: yellow;}
    50%  {background-color: blue;}
    100% {background-color: green;}
}