анимация перехода css3 под нагрузкой? - PullRequest
Новая
       33

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

160 голосов
/ 24 июля 2011

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

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

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

То, что я нашел до сих пор

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

Ответы [ 8 ]

392 голосов
/ 28 сентября 2012

Вы можете запустить CSS анимацию при загрузке страницы без использования JavaScript;вам просто нужно использовать ключевые кадры CSS3 .

Давайте рассмотрим пример ...

Вот демонстрация перемещения меню навигации на место с помощью CSS3 *Только 1012 *: 

@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: 

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.

24 голосов
/ 07 июля 2013

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

19 голосов
/ 19 февраля 2016

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

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

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

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

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

5 голосов
/ 24 июля 2011

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

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

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

1 голос
/ 04 августа 2014

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

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

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

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

1 голос
/ 24 июля 2011

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

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

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

во весь экран: http://jsfiddle.net/faVLX/embedded/result/

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

0 голосов
/ 19 июля 2012

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

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

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

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

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

0 голосов
/ 24 июля 2011

Не совсем, так как 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'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 в устаревших браузерах.

...