鼠标悬停时隐藏并设置动画

Question

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;
    }
}

Answer 1

I think this might help you, if i understood you better:

Demo

 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>