Можно ли использовать анимацию перехода CSS3 при загрузке страницы без использования Javascript?
Это то, что я хочу, но при загрузке страницы:
http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html
Что я нашел до сих пор
Вы можете запустить анимацию CSS при загрузке страницы без использования JavaScript; вам просто нужно использовать CSS3 Keyframes.
Здесь демонстрация навигационного меню, скользящего на место с использованием 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>Очень мало 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';" class="fadein">
Это все, что нужно JavaScript.
Я думаю, что я нашел для работы OP какую-то работу - вместо начала перехода на "on.load" на странице - я обнаружил, что использование анимации для затухания непрозрачности имеет такой же эффект, (I искал то же, что и OP).
Итак, я хотел, чтобы текст тела исчезал от белого (так же, как и фон сайта) до черного цвета текста при загрузке страницы - и я только кодировал с понедельника, поэтому я искал стиль "on.load" но еще не знаю JS - так вот мой код, который хорошо работал у меня.
#main p {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
И по какой-то причине это не работает для .class только #id (по крайней мере, не для меня)
Надеюсь, что это поможет - поскольку я знаю, что этот сайт мне очень помогает!
Ну, это сложный вопрос.
Ответ "не совсем".
CSS не является функциональным слоем. Он не знает, что происходит или когда. Он просто использовал для добавления презентационного слоя в разные "флаги" (классы, идентификаторы, состояния).
По умолчанию CSS/DOM не предоставляет никакого состояния "при загрузке" для использования CSS. Если вы хотели/могли использовать JavaScript, вы бы выделили класс body или что-то, чтобы активировать некоторый CSS.
Как говорится, вы можете создать для этого взлом. Я приведу здесь пример, но он может быть или не быть применимым к вашей ситуации.
Мы работаем исходя из предположения, что "close" является "достаточно хорошим":
<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 будет активирован последним.
запустите его с наведением тела, чем оно начнется, когда мышь сначала движется по экрану, что в основном в течение секунды после прибытия, проблема здесь в том, что она будет отменена, когда выйдет из экрана.
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
Это лучшее, что я могу придумать: http://jsfiddle.net/faVLX/
fullscreen: http://jsfiddle.net/faVLX/embedded/result/
Редактировать см. комментарии ниже:
Это не будет работать на любом сенсорном устройстве, потому что нет наведения, поэтому пользователь не увидит контент, если он не коснется его. - Богатый Брэдшоу
Как и решение @Rolf, но пропустите ссылку на внешние функции или играйте с классом. Если непрозрачность остается фиксированной до 1 после загрузки, просто используйте inline script, чтобы напрямую изменять непрозрачность через стиль. Например
<body class="fadein" onload="this.style.opacity=1">
где CSS sytle "fadein" определяется на @Rolf, определяя переход и устанавливая непрозрачность в начальное состояние (т.е. 0)
Единственный улов в том, что это не работает с элементами SPAN или DIV, так как у них нет рабочего события onload
Хорошо. Мне удалось достичь анимации, когда страница загружается с использованием только css-переходов (вроде!):
Я создал 2 таблицы стилей CSS: Во-первых, я хочу, чтобы html, созданный перед анимацией... а второй - это то, как я хочу, чтобы страница выглядела так, как только анимация была выполнена.
Я не совсем понимаю, как я это сделал, но работает только тогда, когда два файла css (оба в голове моего документа) разделены некоторым javascript следующим образом.
Я тестировал это с помощью Firefox, сафари и оперы. Иногда анимация работает, иногда она пропускается прямо ко второму файлу 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 без задержки или продолжительности.
Мне интересно узнать мнения о том, как этот метод работает с поисковой системой. С моей черной шляпой, я полагаю, я мог бы заполнить страницу ключевыми словами и применить задержка 9999 с ее непрозрачности.
Мне было бы интересно узнать, как поисковые системы имеют дело с атрибутом задержки перехода и могут ли они, используя вышеописанный метод, видеть ссылки и информацию на странице.
Что еще более важно, мне бы очень хотелось знать, почему это не является последовательным при каждой загрузке страницы и как я могу это исправить!
Я надеюсь, что это может породить некоторые взгляды и мнения, если ничего другого!
Если у кого-то еще были проблемы с выполнением двух переходов одновременно, вот что я сделал. Мне нужно, чтобы текст загружался сверху вниз при загрузке страницы.
HTML
<body class="existing-class-name" onload="document.body.classList.add('loaded')">
HTML
<div class="image-wrapper">
<img src="db-image.jpg" alt="db-image-name">
<span class="text-over-image">DB text</span>
</div>
CSS
.text-over-image {
position: absolute;
background-color: rgba(110, 186, 115, 0.8);
color: #eee;
left: 0;
width: 100%;
padding: 10px;
opacity: 0;
bottom: 100%;
-webkit-transition: opacity 2s, bottom 2s;
-moz-transition: opacity 2s, bottom 2s;
-o-transition: opacity 2s, bottom 2s;
transition: opacity 2s, bottom 2s;
}
body.loaded .text-over-image {
bottom: 0;
opacity: 1;
}
Не знаю, почему я продолжал пытаться использовать 2 объявления перехода в 1 селекторе и (не совсем) думал, что он будет использовать оба.
На самом деле, поскольку CSS применяется как можно скорее, но элементы еще не нарисованы. Вы могли догадаться о задержке в 1 или 2 секунды, но это не подходит для большинства людей, в зависимости от скорости их интернета.
Кроме того, если вы хотите что-то затухать, например, для этого требуется CSS, который скрывает содержимое, которое будет доставлено. Если у пользователя нет переходов CSS3, они никогда его не увидели.
Я бы рекомендовал использовать jQuery (для удобства использования + вы можете добавить анимацию для других UA) и некоторых JS, таких как:
$(document).ready(function() {
$('#id_to_fade_in')
.css({"opacity":0}) // Set to 0 as soon as possible – may result in flicker, but it 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. Это имеет то преимущество, что позволяет легко использовать анимацию вместо второго CSS в старых браузерах, если это необходимо.