i want my div to hide when mouseover and turn animate instade and when mouserout div return. so i did some thing like this.
<div class="tec">
<span class="html5"><img ng-src="../images/Technologies/HTML5.png" alt="html5" /></span>
</div>
<script>
$(document).ready(function(){
$(".html5").mouseover(function(){
$(".html5").hide(500);
$(".html5").addclass(".htmlanimate");
});
});
$(".html5").mouseout(function(){
$(".html5").addclass(".html5");
});
</script>
so far i can only hide - every thing else not working =/
CSS
.htmlanimate {
-webkit-animation-name: html5animate;
/* Chrome, Safari, Opera / -webkit-animation-duration: 4s; / Chrome, Safari, Opera / -webkit-animation-iteration-count: 3; / Chrome, Safari, Opera */
animation-name: html5animate;
animation-duration: 4s;
animation-iteration-count: 3;
}
@-webkit-keyframes html5animate {
0% {
border-left:10px solid red;
}
25% {
border-top:10px solid red;
}
50% {
border-right:10px solid red;
}
100% {
border-bottom:10px solid red;
}
}
I think this might help you, if i understood you better:
var img = document.getElementById('imageid'); var width = img.clientWidth; var height = img.clientHeight; $(".html5").hover(function(){ $(".html5").css("height", height + "px"); $(".html5").css("width", width + "px"); $(".html5").addClass("htmlanimate"); $("#imageid").fadeOut(500); }, function(){ $("#imageid").fadeIn(500); $(".html5").removeClass("htmlanimate"); });
.html5 { display:inline-block; border:10px solid transparent; } .htmlanimate { -webkit-animation-name: html5animate; /* Chrome, Safari, Opera / -webkit-animation-duration: 4s; / Chrome, Safari, Opera / -webkit-animation-iteration-count: 3; / Chrome, Safari, Opera */ animation: html5animate 5s infinite; animation-iteration-count: 3; } @-webkit-keyframes html5animate { 0%, 25% { border-left:10px solid red; } 25%,50%,74% { border-left:10px solid red; border-top:10px solid red; } 75% { border-left:10px solid red; border-top:10px solid red; border-right:10px solid red; } 100% { border-left:10px solid red; border-top:10px solid red; border-right:10px solid red; border-bottom:10px solid red; } }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="tec"> <span class="html5"> <img id="imageid" src="https://www.google.co.in/logos/doodles/2015/googles-17th-birthday-6231962352091136-hp.png" alt="html5" /> </span> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.