Анимация div с CSS при зависании

Я пытаюсь анимировать div на hover с помощью правила CSS3 @keyframes. Код для анимации находится в самом низу this page (сразу после щедро отмеченного комментария «ЗДЕСЬ АНИМАЦИЯ» ASCII). Это включает правило @keyframes, div и div: hover. Страница, где мне нужна эта анимация, - right here. По какой-то причине анимация не работает; это первый раз, когда я пробовал использовать анимацию CSS, так что, вероятно, есть какая-то ошибка начинающего.Анимация div с CSS при зависании

источник

2012-04-12 Jules

Правило @keyframes не поддерживается ни в каких браузерах. Firefox поддерживает альтернативное правило @ -moz-keyframes. Safari и Chrome поддерживают альтернативу, правило @ -webkit-keyframes. Вы уверены, что вам все равно нужно возиться с этим? =) –

Я думаю, что правило @ -webkit-keyframes уже существует; Я воздержался от -moz, потому что Dreamweaver не признал его действительным вариантом @keyframes. Но я тестировал страницу в Chrome, и анимация не отображается. – Jules

Я думаю, что вы оставили ссылку на свой вопрос, который указывает на интересующую вас актуальную страницу. –

Если вы пытаетесь анимировать свой div от 0px до 200px, гораздо проще использовать решение jQuery. jQuery предлагает кросс-браузерную совместимость по сравнению с @keyframe, которая поддерживается только в Safari и Chrome.

Вот пример: http://jsfiddle.net/ZgcxL/

EDIT:

Если вы не хотите, чтобы ваши пользователи будут ограничены только Chrome и Safari, вы должны обязательно рассмотреть JQuery. Это очень просто использовать. Просто добавьте этот код где-нибудь между вашими тегами <head></head>.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
    $('.macanimation').hover(function() { 
     $(this).animate({top: '200px'}); 
    }); 
    }); 
</script>

EDIT 2:

Я забыл document.ready(). Повторно вставьте код выше. Также добавьте положение: абсолютное; к вашему div и добавить 'px' к вашей ширине:

div.macanimation { 
    position: absolute; 
    width:960px; 
    height:500px; 
    padding-left:40px; 
    padding-right:40px; 
    margin:auto; 
    background-image:url(/Photos/MacHQ.png); 
}

Протестировано, работает.

источник

2012-04-12 01:19:58

Мне бы очень хотелось, но я знаю гораздо меньше о jQuery, чем о CSS3 (как, я никогда не использовал его). Я попробую, если это единственное возможное решение; в противном случае я бы предпочел придерживаться CSS3. – Jules

На самом деле, я только что установил последний jquery.js в свою папку root/js, и я готов принять jQuery. Где разместить этот скрипт? $ ('div'). Hover (function() { $ (this) .animate ({top: '200px'}); }); – Jules

См. Мой отредактированный ответ. –

Анимация div с CSS при зависании

ответ

Смежные вопросы