Загрузка CSS3 при загрузке страницы

Question

Загрузка CSS3 при загрузке страницы

0

У меня есть следующий код 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>

Shareer 21 март 2014, в 08:13

Источник

Теги:

javascript

jquery

html

css

css3

3 ответа

0

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

skrtbhtngr 21 март 2014, в 05:30

0

Это не произойдет, если вы не используете анимацию CSS @keyframes. вы можете использовать, как указано ниже.

и используйте класс animation-rotate в тэге img. Вот Демо.

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

Kheema Pandey 21 март 2014, в 04:54

Ещё вопросы

rauberdaniel · Accepted Answer · 2014-03-21T05-28-00.000Z

Существует несколько способов достижения этой цели:

Первый - добавить класс к логотипу после pageload с JavaScript. Вам нужно сделать это, потому что переходы CSS реагируют только на изменения, такие как изменения в списке классов, зависание и т.д., Но не могут запускаться сами по себе.

Второй способ - использовать анимации ключевого кадра CSS, которые, я считаю, больше того, что вы хотите. Вы можете узнать об этом здесь: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

Можем ли мы реализовать это с помощью jquery?
Да, вы также можете использовать JQuery. Например: Добавить $('.logo').addClass('animated'); в <script> в нижнем колонтитуле сайта, а затем измените селектор CSS .logo:hover на .logo.animated .