Effect in sections with circles icons.

because Enfold uses as icons an icon-set and did some dimensions on that by line-height of the entypo fontello font. we must reconstruct a bit on that. On your example page there are svg as icons!

If you choose the big icon alb and animation only have icons with links.

you must look to that setup : i have choosen 80px icon-height ! this had to be synchronized with one css setting of that effect.
I gave to the icon alb elment a custom-class of: move

here is the result: https://webers-testseite.de/icon-in-motion/

what i now try to achieve is that the radar effect of enfold is included to that effect.

here is the interims code:

.av_font_icon.av-icon-style-border.move .av-icon-char {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background-color: #fff;
	-webkit-transition: background .5s,color .5s,-webkit-box-shadow .5s;
	transition: background .5s,color .5s,-webkit-box-shadow .5s;
	transition: background .5s,color .5s,box-shadow .5s;
	transition: background .5s,color .5s,box-shadow .5s,-webkit-box-shadow .5s;
	border-radius: 50%;
	-webkit-box-shadow: 0 0 0 2px #bbb;
	box-shadow: 0 0 0 2px #bbb;
    height: 80px;
}

.av_font_icon.av-icon-style-border.move .av-icon-char:hover {
    background-color:  #6b6b6b;
      -webkit-box-shadow: 0 0 0 6px rgba(0,0,0,.1);
    box-shadow: 0 0 0 6px  rgba(0,0,0,.1);
}

.av_font_icon.av-icon-style-border.move .av-icon-char:before {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.av_font_icon.av-icon-style-border.move .av-icon-char:hover:before {
    animation: toRightFromLeft .5s forwards;
    color: #fff
}

/***  animation for that ****/
@-webkit-keyframes toRightFromLeft {
 49% {
  -webkit-transform:translateX(100%) translateY(-50%);
  transform:translateX(100%) translateY(-50%)
 }
 50% {
  opacity:0;
  -webkit-transform:translateX(-100%) translateY(-50%);
  transform:translateX(-100%) translateY(-50%)
 }
 51% {
  opacity:1
 }
}
@keyframes toRightFromLeft {
 49% {
  -webkit-transform:translateX(100%) translateY(-50%);
  transform:translateX(100%) translateY(-50%)
 }
 50% {
  opacity:0;
  -webkit-transform:translateX(-100%) translateY(-50%);
  transform:translateX(-100%) translateY(-50%)
 }
 51% {
  opacity:1
 }
}