Css3 переход анимации при загрузке?

Можно ли использовать анимацию перехода CSS3 при загрузке страницы без использования Javascript?

Это то, что я хочу, но при загрузке страницы:

http://rilwis.googlecode.com/svn/trunk/demo/image-slider.html

Что я нашел до сих пор

  • задержка перехода CSS3, способ задержки эффектов на элементы. Работает только при наведении курсора.
  • CSS3 Keyframe, работает при загрузке, но чрезвычайно медленный. Не полезно из-за этого.
  • Переход CSS3 достаточно быстрый, но не оживляемый при загрузке страницы.

Ответы

Ответ 1

Вы можете запустить анимацию 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>

Ответ 2

Очень мало 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.

Ответ 3

Я думаю, что я нашел для работы OP какую-то работу - вместо начала перехода на "on.load" на странице - я обнаружил, что использование анимации для затухания непрозрачности имеет такой же эффект, (I искал то же, что и OP).

Итак, я хотел, чтобы текст тела исчезал от белого (так же, как и фон сайта) до черного цвета текста при загрузке страницы - и я только кодировал с понедельника, поэтому я искал стиль "on.load" но еще не знаю JS - так вот мой код, который хорошо работал у меня.

#main p {
  animation: fadein 2s;
}
@keyframes fadein {
  from { opacity: 0}
  to   { opacity: 1}
}

И по какой-то причине это не работает для .class только #id (по крайней мере, не для меня)

Надеюсь, что это поможет - поскольку я знаю, что этот сайт мне очень помогает!

Ответ 4

Ну, это сложный вопрос.

Ответ "не совсем".

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 будет активирован последним.

Ответ 5

запустите его с наведением тела, чем оно начнется, когда мышь сначала движется по экрану, что в основном в течение секунды после прибытия, проблема здесь в том, что она будет отменена, когда выйдет из экрана.

html:hover #animateelementid, body:hover #animateelementid {rotate ....}

Это лучшее, что я могу придумать: http://jsfiddle.net/faVLX/

fullscreen: http://jsfiddle.net/faVLX/embedded/result/

Редактировать см. комментарии ниже:
Это не будет работать на любом сенсорном устройстве, потому что нет наведения, поэтому пользователь не увидит контент, если он не коснется его. - Богатый Брэдшоу

Ответ 6

Как и решение @Rolf, но пропустите ссылку на внешние функции или играйте с классом. Если непрозрачность остается фиксированной до 1 после загрузки, просто используйте inline script, чтобы напрямую изменять непрозрачность через стиль. Например

<body class="fadein" onload="this.style.opacity=1">

где CSS sytle "fadein" определяется на @Rolf, определяя переход и устанавливая непрозрачность в начальное состояние (т.е. 0)

Единственный улов в том, что это не работает с элементами SPAN или DIV, так как у них нет рабочего события onload

Ответ 7

Хорошо. Мне удалось достичь анимации, когда страница загружается с использованием только 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 с ее непрозрачности.

Мне было бы интересно узнать, как поисковые системы имеют дело с атрибутом задержки перехода и могут ли они, используя вышеописанный метод, видеть ссылки и информацию на странице.

Что еще более важно, мне бы очень хотелось знать, почему это не является последовательным при каждой загрузке страницы и как я могу это исправить!

Я надеюсь, что это может породить некоторые взгляды и мнения, если ничего другого!

Ответ 8

Если у кого-то еще были проблемы с выполнением двух переходов одновременно, вот что я сделал. Мне нужно, чтобы текст загружался сверху вниз при загрузке страницы.

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 селекторе и (не совсем) думал, что он будет использовать оба.

Ответ 9

На самом деле, поскольку 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 в старых браузерах, если это необходимо.