scrooll animation (job247.vn) (ok)

jQuery(document).ready(function($) {
  var $animation_elements = $('.animation-elementone');
 	var $window = $(window);
  function check_if_in_view() {
    var window_height = $window.height();
    var window_top_position = $window.scrollTop();
    var window_bottom_position = (window_top_position + window_height);
    $.each($animation_elements, function() {
      var $element = $(this);
      var element_height = $element.outerHeight();
      var element_top_position = $element.offset().top;
      var element_bottom_position = (element_top_position + element_height);
      if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) {
        $element.addClass('in-viewone');
        $('.itemwork-one').addClass('animation-elementone');
        $('.itemwork-two').addClass('animation-elementone animation-elementtwo');
      } else {
        $element.removeClass('in-viewone');
      }
    });
  }
  $window.on('scroll resize', check_if_in_view);
});

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.animation-elementone {
  opacity: 0;
  -moz-transition: all 500ms linear;
  -webkit-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
  -moz-transform: translate3d(-100px, 0px, 0px);
  -webkit-transform: translate3d(-100px, 0px, 0px);
  -o-transform: translate(-100px, 0px);
  -ms-transform: translate(-100px, 0px);
  transform: translate3d(-100px, 0px, 0px);
}

.animation-elementtwo {
  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);
}

.animation-elementthree {
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animation-elementthree.in-viewone {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

.animation-elementone.in-viewone {
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);
}

<div class="container">
		<div class="row">
			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 service animation-elementone">
				<a href="#">
					<img src="https://vesinhminhduong.vn/wp-content/uploads/2020/01/ve-sinh-cong-nghiep-1.jpg" alt="ve-sinh-cong-nghiep-1.jpg">
					<h3>Vệ Sinh Công Nghiệp</h3>
				</a>
			</div>
			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 service animation-elementone">
				<a href="#">
					<img src="https://vesinhminhduong.vn/wp-content/uploads/2020/01/ve-sinh-cong-nghiep-1.jpg" alt="ve-sinh-cong-nghiep-1.jpg">
					<h3>Vệ Sinh Công Nghiệp</h3>
				</a>
			</div>
			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 service animation-elementone animation-elementtwo">
				<a href="#">
					<img src="https://vesinhminhduong.vn/wp-content/uploads/2020/01/ve-sinh-cong-nghiep-1.jpg" alt="ve-sinh-cong-nghiep-1.jpg">
					<h3>Vệ Sinh Công Nghiệp</h3>
				</a>
			</div>
			<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 service animation-elementone animation-elementtwo">
				<a href="#">
					<img src="https://vesinhminhduong.vn/wp-content/uploads/2020/01/ve-sinh-cong-nghiep-1.jpg" alt="ve-sinh-cong-nghiep-1.jpg">
					<h3>Vệ Sinh Công Nghiệp</h3>
				</a>
			</div>
		</div>
	</div>