hover animation

Блок увеличивается и поворачивается влево

by akogch

HTML

<div id="example"></div>

CSS

#example {
  background: red;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  transition: background 0.3s ease 0.5s, transform 0.2s ease-in-out 0.5s;
}

#example:hover {
  background: blue;
  transform: scale(1.5) rotate(-30deg);
  -webkit-animation: pulse 1.5s infinite ease-in-out;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 20px rgba(0, 155, 0, 0.5);
  }
  50% {
    -webkit-box-shadow: 0 0 20px rgba(0, 155, 0, 1);
  }
  100% {
    -webkit-box-shadow: 0 0 20px rgba(0, 155, 0, 0.5);
  }
}