JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css">
<section id="habilidades" class="habilidades">

	<div class="habilidades_contenedor">
		<h2>わたしの非コミュスキル</h2>
		<div id="codeconSkills">
			<div class="codeconSkillbar">
				<div id="" class="skillBar" skill-percentage="80%" skill-color="#ccdb38"> 
					<span class="codeconSkillArea ">目を合わさない</span>
					<span class="PercentText ">80%</span>
				</div>
			</div>
			<div class="codeconSkillbar">
			<div id="" class="skillBar" skill-percentage="75%" skill-color="#02a8f3">
				<span class="codeconSkillArea">電話に出ない</span>
				<span class="PercentText">75%</span>

			</div>

			</div>
		<div class="codeconSkillbar">
			<div id="" class="skillBar" skill-percentage="90%" skill-color="#fe5621">
				<span class="codeconSkillArea ">お店の店員さんに怯える</span>
				<span class="PercentText">90%</span>
			</div>

		</div>
		<div class="codeconSkillbar">
			<div id="" class="skillBar" skill-percentage="60%" skill-color="#785447">
				<span class="codeconSkillArea">話すだけで汗がでる</span>
				<span class="PercentText ">60%</span>

			</div>
		</div>
		
			<div class="codeconSkillbar">
			<div id="" class="skillBar" skill-percentage="50%" skill-color="#e81d62">
				<span class="codeconSkillArea">動物相手が楽に感じる</span>
				<span class="PercentText ">50%</span>

			</div>
		</div>
		
				<div class="codeconSkillbar">
			<div id="" class="skillBar" skill-percentage="85%" skill-color="#5f7c8a">
				<span class="codeconSkillArea">少しの人混みでも辛い</span>
				<span class="PercentText ">85%</span>

			</div>
		</div>
    
    				<div class="codeconSkillbar">
			<div id="" class="skillBar" skill-percentage="65%" skill-color="#fec006">
				<span class="codeconSkillArea">近所の人と関わらない</span>
				<span class="PercentText ">65%</span>

			</div>
		</div>
    
		</div>
		</div>

</section>

CSS

.habilidades_contenedor {
	width: 100%;
}
h2{text-align:center;}

#codeconSkills {
font-size: 12px;
height: auto;
margin: 0 auto;
padding: 10px;
width: 80%;
}

.codeconSkillbar {
width: 90%;
height: 100px;
position: relative;
background: rgba(17, 17, 17, .3);
margin: 20px auto;
}
#codeconHTML {
width: 100%;
animation: Animate-HTML 4s;
-webkit-animation: Animate-HTML 4s;
-moz-animation: Animate-HTML 4s;
-o-animation: Animate-HTML 4s;
height: 100px;
position: absolute;
background-color: #ea8564;
}
@keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-webkit-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-moz-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}@-o-keyframes Animate-HTML {
from {
width: 10px;
}
to {
width: 100%}
}
#codeconCSS {
animation: Animate-CSS 5s;
-webkit-animation: Animate-CSS 5s;
-moz-animation: Animate-CSS 5s;
-o-animation: Animate-CSS 5s;
width: 70%;
height: 100px;
position: absolute;
background-color: #55a69f;
}
@keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-webkit-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-moz-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}@-o-keyframes Animate-CSS {
from {
width: 10px;
}
to {
width: 70%}
}
#codeconjQuery {
animation: Animate-jQuery 5s;
-webkit-animation: Animate-jQuery 5s;
-moz-animation: Animate-jQuery 5s;
-o-animation: Animate-jQuery 5s;
width: 50%;
height: 100px;
position: absolute;
background-color: #99856d;
}

.skillBar {
	width: 5%;
	height: 100px;
	position: absolute;
	background-color: transparent;
	transition: 3s;
	-webkit-transform: translateZ(0);
   -moz-transform: translateZ(0);
   -ms-transform: translateZ(0);
   -o-transform: translateZ(0);
   transform: translateZ(0);
} 

@keyframes Animate-jQuery {
from {
	width: 10px;
}
to {
	width: 50%}
}
@-webkit-keyframes Animate-jQuery {
	from {
		width: 10px;
	}
	to {
		width: 50%
	}
}
@-moz-keyframes Animate-jQuery {
	from {
		width:...

JavaScript

$.fn.skill = function() {

	mSkill = this;
  $(window).on('scroll', function() { // las animaciones se dispararan cuando el recuadro este visible en el viewport
	
	mSkill.find('.skillBar').each(function() {

		if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.90 &&!$(this).hasClass("sk-fired")) {
			//una vez que cada skill bar esta en el viewport
			
			$(this).addClass('sk-fired'); //agregamos una clase como bandera para evitar que se vuelva a reproducir la animacion
			var defaultPercentage = "50%";
			var color = $(this).attr('skill-color');
			var defaultColor = "white";
			//animamos el ancho de cada barra
			if($(this).attr('skill-percentage')) {
				$(this).width($(this).attr('skill-percentage'));
			} else {
				$(this).width(defaultPercentage);
			}

			//seteamos el color

			if(color) {
				$(this).css('background-color', color);
			} else {
				$(this).css('background-color',defaultColor);
			}

			//buscamos las imagenes para animarlas
			$(this).parent().find(".skill-image").each(function() {
				var imagen = $(this);
				setInterval(function() {

					imagen.show().addClass("animated").addClass("bounceIn");
				}, 2000);
				
			});
			}
		});

}	);

     return mSkill;
}

$(document).ready(function() {
			$(".habilidades").skill();
		});