My attempt to animate two images is not working. I received some help on Stack Overflow but still facing issues with my CSS and HTML code.
This is the code I am using:
$(document).ready(function() {
$(".animar").click(function() {
$("#img4").addClass("uno");
});
});#img4 {
width: 7%;
height: auto;
margin: auto;
display: block;
background-size:20%;
float: left;
}
#img5 {
width: 3%;
height: auto;
margin: auto;
display: block;
background-size:20%;
position: relative;
right:20%;
}
.animar {
width: 123px;
height: auto;
margin-right: 15%;
display: block;
background-size:0%;
float:right;
border-color: white;
background-color: rgba(43,86,162, 1.00);
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 20px;
color: white;
border-radius: 12px;
border-width: 10px;
}
uno {
animation-name: uno;
animation-duration: 10s;
}
@keyframes uno {
20% {left:80px;}
50%{left:190px;}
70%{left:220px}
100%{left:350px;}
}
#gradiente2 {
background: rgba(43,86,162, 1.00);
position: relative;
margin-bottom: 0;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12" id="gradiente2">
<p id="t1" class="typewrite" data-period="2000" data-type='[ "En nuestra institución siempre nos preocupamos por brindarte lo mejor" ]'><span class="wrap"></span> </p>
<p id="t2" class="typewrite" data-period="2000" data-type='[ "Síempre le Ponemos Corazón, a lo que hacemos" ]'><span class="wrap"></span> </p>
<div>
<img src="imagenes/kangura.png" class="img-responsive" id="img4">
<img src="imagenes/corazon.png" class="img-responsive" id="img5">
<button class="animar">Entregar Corazón</button>
</div>
</div>