it-swarm.com.ru

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

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

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

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

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

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

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

Вы можете делать разные интересные вещи, такие как скольжение по содержанию или привлечение внимания к областям.

Вот что должен сказать W3C.

388
Chris Spittles

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

24
Rolf

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

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

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

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

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

19
Lee John

Ну, это сложно.

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

CSS не является функциональным слоем. Он не знает, что происходит и когда. Он используется просто для добавления слоя presentational в различные "флаги" (классы, идентификаторы, состояния).

По умолчанию 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
foxy

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

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

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

полный экран: http://jsfiddle.net/faVLX/embedded/result/

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

1
beardhatcode

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

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

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

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

1
user3907296

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

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

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

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

0
Michael Walkling