CSS3 анимация перехода при загрузке?
можно ли использовать анимацию перехода CSS3 при загрузке страницы без использования Javascript?
Это то, что я хочу, но при загрузке страницы:
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
то, что я нашел до сих пор
- CSS3 переход-задержка, способ задержки эффектов на элементах. Работает только при наведении.
- CSS3 с кадра, работы по нагрузка, но чрезвычайно медленная. Из-за этого бесполезно.
- CSS3-перехода достаточно быстро, но не анимации при загрузке страницы.
8 ответов
вы can запустить в CSS анимация при загрузке страницы без использования JavaScript; вам просто нужно использовать С помощью CSS3 ключевые кадры.
давайте рассмотрим пример...
вот демонстрация навигационного меню, скользящего на место с помощью С помощью CSS3 только:
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
header {
/* This section calls the slideInFromLeft animation we defined above */
animation: 1s ease-out 0s 1 slideInFromLeft;
background: #333;
padding: 30px;
}
/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}<header>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Contact</a>
</header>разбить его...
важными частями здесь являются анимация ключевого кадра, которую мы звоните slideInFromLeft...
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
...что в основном говорит: "в начале заголовок будет от левого края экрана на всю ширину, а в конце будет на месте".
вторая часть называет это slideInFromLeft анимация:
animation: 1s ease-out 0s 1 slideInFromLeft;
выше стенографическая версия, но вот многословная версия для ясности:
animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */
вы можете делать всевозможные интересные вещи, такие как скольжение по контенту или привлечение внимания к области.
очень мало Javascript необходимо:
window.onload = function() {
document.body.className += " loaded";
}
Теперь CSS:
.fadein {
opacity: 0;
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
#body.loaded .fadein {
opacity: 1;
}
Я знаю, что вопрос сказал "без Javascript", но я думаю, что стоит отметить, что есть простое решение, включающее одну строку Javascript.
это может быть даже встроенный Javascript, что-то вроде этого:
<body onload="document.body.className += ' loaded';">
Это все, что требуется JavaScript.
Я думаю, что я нашел своего рода работу вокруг вопроса OP - вместо начала перехода " on.загрузка страницы-я обнаружил, что использование анимации для затухания непрозрачности имело тот же эффект (я искал то же самое, что и OP).
поэтому я хотел, чтобы текст тела исчезал с белого (так же, как фон сайта) на черный цвет текста при загрузке страницы - и я только кодировал с понедельника, поэтому я искал и дальше.загрузите код стиля, но еще не знаете JS - Итак, вот мой код, который хорошо работал для меня.
#main p {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
и по какой-то причине это не работает для .class только #id(по крайней мере, не на моем)
надеюсь, это поможет - как я знаю, этот сайт помогает мне много!
Ну, это сложный вопрос.
ответ "не очень".
CSS не является функциональным слоем. Он не осознает, что происходит и когда. Он используется просто для добавления представления слой к различным "флагам" (классам, идентификаторам, состояниям).
по умолчанию CSS / DOM не предоставляет никакого состояния "on load" для использования CSS. Если бы вы хотели / могли использовать JavaScript, вы бы выделили класс body или что-то активировать некоторые стиль CSS.
это, как говорится, вы можете создать хак для этого. Я приведу здесь пример, но он может быть или не быть применим к вашей ситуации.
мы работаем на предположении, что "закрыть" - это "достаточно хорошо":
<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
<!-- A whole bunch of HTML here... -->
<div class="onLoad">OMG, I've loaded !</div>
</body>
</html>
вот выдержка из нашей таблицы стилей CSS:
.onLoad
{
-webkit-animation:bounceIn 2s;
}
мы также исходим из предположения, что современные браузеры визуализируются постепенно, поэтому наш последний элемент будет отображаться последним, и поэтому этот CSS будет активирован последним.
подобно решению @Rolf, но пропустите ссылку на внешние функции или игру с классом. Если непрозрачность должна оставаться фиксированной к 1 после загрузки, просто используйте встроенный скрипт для прямого изменения непрозрачности через стиль. Например
<body class="fadein" onload="this.style.opacity=1">
где CSS sytle" fadein " определяется в @Rolf, определяя переход и устанавливая непрозрачность в начальное состояние (т. е. 0)
единственный улов заключается в том, что это не работает с элементами SPAN или DIV, так как они не работают onload событие
запустите его с наведением тела, чем он начнется, когда мышь сначала перемещается по экрану, который в основном находится в течение секунды после прибытия, проблема здесь в том, что он будет обратный, когда из экрана.
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
Это лучшее, что я могу придумать:http://jsfiddle.net/faVLX/
экран: http://jsfiddle.net/faVLX/embedded/result/
Edit см. комментарии ниже:
Это не сработает любое сенсорное устройство, потому что нет наведения, поэтому пользователь не увидит содержимое, если они не нажмут его. - Рич Брэдшоу!--2-->
Ok мне удалось достичь анимации, когда страница загружается, используя только CSS-переходы (вроде!):
Я создал 2 таблицы стилей css: во-первых, как я хочу, чтобы html-стиль перед анимацией... и во-вторых, как я хочу, чтобы страница выглядела после того, как анимация была выполнена.
Я не совсем понимаю, как я это сделал, но он работает только тогда, когда два файла css (оба в голове моего документа) разделены некоторым javascript как следует.
я протестировал это с Firefox, safari и opera. Иногда анимация работает, иногда она переходит прямо ко второму файлу css, а иногда страница кажется загруженной, но ничего не отображается (возможно, это только я?)
<link media="screen,projection" type="text/css" href="first-css-file.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){ // Update class to point at the head of the list
});
}
});
</script>
<link media="screen,projection" type="text/css" href="second-css-file.css" rel="stylesheet" />
вот ссылка на мой незавершенный веб-сайт:http://www.hankins-design.co.uk/beta2/test/index.html
возможно, я ошибаюсь, но я думал, что браузеры, которые не поддерживают переходы css, должны не имеют никаких проблем, поскольку они должны перейти прямо ко второму файлу css без задержки или продолжительности.
Мне интересно узнать мнения о том, как поисковых систем этот метод. С моей черной шляпой я полагаю, что мог бы заполнить страницу ключевыми словами и применить задержку 9999s на ее непрозрачности.
мне было бы интересно узнать, как поисковые системы справляются с атрибутом transition-delay и будут ли, используя метод выше, они даже видеть ссылки и информацию о страница.
что еще более важно, я действительно хотел бы знать, почему это не согласуется каждый раз при загрузке страницы и как я могу это исправить!
Я надеюсь, что это может создать некоторые взгляды и мнения, если ничего другого!
не совсем, так как CSS применяется как можно скорее, но элементы еще не могут быть нарисованы. Вы могли догадаться задержка на 1 или 2 секунды, но это не будет выглядеть правильно для большинства людей, в зависимости от скорости их интернета.
кроме того, если вы хотите скрыть что-то, например, потребуется CSS, который скрывает содержимое для доставки. Если у пользователя нет переходов CSS3, они никогда не увидят его.
Я бы рекомендовал использовать jQuery (для удобства используйте + вы можете добавить анимацию для других UAs) и некоторые JS, как это:
$(document).ready(function() {
$('#id_to_fade_in')
.css({"opacity":0}) // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
.delay(200) // Wait for a bit so the user notices it fade in
.css({"opacity":1}); // Fade it back in. Swap css for animate in legacy browsers if required.
});
вместе с переходами, добавленными в CSS. Это имеет то преимущество, что позволяет легко использовать animate вместо второго CSS в устаревших браузерах, если это необходимо.