css给元素添加transition动画效果

/*hover时a元素向右缓慢移动*/

.circle a {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);;
  transition: left 0.5s ease-in;
  -moz-transition: left 0.5s ease-in; /* Firefox 4 */
  -webkit-transition: left 0.5s ease-in; /* Safari 和 Chrome */
  -o-transition: left 0.5s ease-in; /* Opera */
}

.leftabout .circle:hover a {
  left: 100%;
  transition: left 0.5s ease-out;
  -moz-transition: left 0.5s ease-out; /* Firefox 4 */
  -webkit-transition: left 0.5s ease-out; /* Safari 和 Chrome */
  -o-transition: left 0.5s ease-out; /* Opera */
}