@keyframesを使用しないアニメーションのサンプル

マウスオーバーで色が変化するリンク

.barをマウスオーバーで上昇

a {
  color: blue;
  transition: color 1s;
}
a:hover {
  color: red;
}

.bar {
  width: 200px;
  height: 20px;
  border: 1px solid #333;
}

.bar div {
  width: 0%;
  height: 20px;
  background: lime;
  transition: width 3s;
}

.bar:hover div {
  width: 100%;
}