动画后的HTML/CSS图像消除_Html_Css_Image_Animation

动画后的HTML/CSS图像消除

html css image animation

动画后的HTML/CSS图像消除,html,css,image,animation,Html,Css,Image,Animation,我为我的网站制作了一个动画徽标，但它不起作用：/ 动画在Waterbox和IE中不起作用，而在Chrome中则是buggy。将鼠标悬停在图像上，动画停止后，图像将消失例如：我的html代码： <!doctype html> <html> <head> <title> Blender4Me </title> <link type="text/css" re

我为我的网站制作了一个动画徽标，但它不起作用：/

动画在Waterbox和IE中不起作用，而在Chrome中则是buggy。将鼠标悬停在图像上，动画停止后，图像将消失

例如：

我的html代码：

<!doctype html>
<html>
    <head>
        <title>
        Blender4Me
        </title>

        <link type="text/css" rel="stylesheet" href="logo.css"/>

    </head>

    <body id="header">
        <!-- Mittleres Feld -->
        <div class="mid">
            <a href="#" > <img class="logo" src="inner_outer_circle.gif"/> </a>
            <a href="#" class="rotate"> <img class="logo" src="mid_circle.gif"/> </a>
        </div>
    </body>
</html>

也许你知道发生了什么，并且知道如何解决不同浏览器的问题：3

在色度学测试中似乎不是这样添加转换：rotate0deg；对于.rotate，你是对的，但是在Waterbox中它不工作，在IE中它看起来像buggyfiddle-那么，它在我的网站/本地主机上不工作的原因是什么？

#header
{
    margin: 0 0 0 0;
    background: #222222 none;
}

.rotate{
    -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}  

.rotate:hover  
{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
}

.logo{
    position: absolute;
    width: 1024px;
    height: 1024px;
}

div{
    position: absolute;
    width: 1024px;
    height: 1024px;
    border: 20px solid #FFFFFF;
}