Question

我有以下HTML代码。我已经使用CSS3对徽标应用了一些动画，它按照我的意愿工作。现在，当我们将鼠标悬停在徽标上时，动画就会生效。我希望动画在页面加载时自动工作。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>After Quote</title>
<style type="text/css">
.container {
background: none repeat scroll 0 0 #1180AE;
height: 340px;
margin: 0 auto;
padding-top: 50px;
width: 215px;
background: url(container.jpg) no-repeat;
}
.content {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 8px;
height: 200px;
margin: 0 auto;
padding-top: 115px;
width: 194px;
}
.logo:hover {
border-radius: 50%;
transform: rotate(720deg);
}
.logo {
height: 80px;
margin: 0 auto;
transition: all 1s ease 0s;
width: 80px;
}
.logo img {
border-radius: 15px;
}
</style>
</head>
<body>
<div class="container">
  <div class="content">
    <div class="logo"> <a href="#"> <img src="logo.jpg" alt="logo" /></a> </div>
    <!--logo--> 
  </div>
  <!--content--> 
</div>
<!--container-->

</body>
</html>

Answer 1

有多种方法可以实现这一目标：

第一个是使用JavaScript在pageload之后为徽标添加一个类。您需要这样做，因为CSS 过渡仅对类别列表更改，悬停等更改做出反应，但无法自行启动。

第二种方法是使用CSS 关键帧动画，我相信这更像是你想要的。您可以在此处了解相关信息：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Answer 2

除非您使用@keyframes CSS动画，否则不会。你可以使用下面提到的..

并在animation-rotate标记中使用img类。这是 Demo 。

.animation-rotate {
    margin:auto;
    -webkit-animation:coinflip 2s infinite linear;
    animation:coinflip 2s infinite linear;
  -moz-animation:coinflip 2s infinite linear;
}
@-webkit-keyframes coinflip {
    0% {
        -webkit-transform:rotateY(-1deg);
    }
    100% {
        -webkit-transform:rotateY(360deg);
    }
}
@-moz-keyframes coinflip {
    0% {
        -moz-transform:rotateY(-1deg);
    }
    100% {
        -moz-transform:rotateY(360deg);
    }
}
@keyframes coinflip {
    0% {
        transform:rotateY(0deg);
    }
    100% {
        transform:rotateY(360deg);
    }
}

Answer 3

@-webkit-keyframes anm {
    0% {-webkit-transform: rotate(0deg);}
    25% {-webkit-transform: rotate(180deg);}
    50% {-webkit-transform: rotate(360deg);}
    75% {-webkit-transform: rotate(540deg);}
    100% {-webkit-transform: rotate(720deg);}
}
@keyframes anm {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(180deg);}
    50% {transform: rotate(360deg);}
    75% {transform: rotate(540deg);}
    100% {transform: rotate(720deg);}
}
.logo img {
height: 80px;
border-radius: 15px;
-webkit-animation: anm 1s;
animation: anm 1s;
}
.logo img:hover {
border-radius: 50%;
transition: all 1s ease 0s;
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
}

页面加载时加载CSS3

3 个答案: