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

Question

我希望当鼠标悬停并启用动画实例化以及当mouserout div返回时隐藏我的div。 所以我做了这样的事情。

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

到目前为止，我只能隐藏-其他所有不起作用= /

的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

如果我更了解您，我认为这可能对您有所帮助：

演示版

 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>