196

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

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

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

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

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

css webkit css-transitions css-animations Йенс Торнелл
источник

@blesh: почти все - см., например, mysociety.org/2011/08/11/mobile-operators-breaking-content и robertnyman.com/2006/04/25/…

NickFitz

2

Ключевые кадры достигнут этого и обеспечат лучший запасной вариант, когда анимации CSS3 не поддерживаются. Почему вы думаете, что они слишком медленные?

Зачлеат

Здравствуй! Ссылка теперь не работает, и я не знаю, куда она должна была пойти, поэтому кто-нибудь может это исправить, пожалуйста!

Linux4Life531

460

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

Крис Спиттлс
источник

20

Что заставляет это работать при загрузке страницы, а не раньше?

Рольф

2

Просто, чтобы ответить на вопрос, приведенный выше, по умолчанию анимация начинается с нуля после применения без задержки. Существует дополнительное свойство, animation-delay, которое можно установить для управления этим. См .: w3.org/TR/css3-animations/#animation-delay-property

Майкл Дэвис,

2

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

TaylorMac

@SuzanneEdelmanCreoconcept, насколько мне известно, IE9 не поддерживает свойство перехода. Ваши варианты будут JS или изящная деградация.

Крис Спиттлз

1

Отличный ответ, помог мне в 2019 году!

Госи

28

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

Рольф
источник

2

Небольшое исправление: <body onload = "document.body.setAttribute ('class','loaded ')">

Иван

1

Если нет необходимости ждать события onLoad страницы, вставьте этот код перед тегом </ body>: <script type = "text / javascript"> document.body.setAttribute ('class','loaded '); </ script>

Иван

7

Чтобы избежать переопределения существующих bodyклассов, используйте:document.body.classList.add('loaded)

Вячеслав Котрута

1

Я нашел , document.body.className += " loaded";чтобы быть немного менее многословным для добавления в loadedкласс к существующим классам.

Пим Шааф

1

@PimSchaaf Спасибо за ваше предложение, оно имеет смысл. Я отредактирую это сейчас. В настоящее время вы также можете использовать classList, который немного более элегантен (но менее совместим).

Рольф

21

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

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

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

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

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

Ли Джон
источник

6

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

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

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

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

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

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

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

user3907296
источник

1

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

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

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

Полноэкранный режим: http://jsfiddle.net/faVLX/embedded/result/

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

beardhatcode
источник

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

Йенс Торнелл

13

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

Рич Брэдшоу

1

CSS только с задержкой 3 с

несколько моментов, чтобы взять здесь:

несколько анимаций за один звонок
мы создаем анимацию ожидания, которая просто задерживает реальную (в нашем случае вторая).

Код:

header {
    animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}

@keyframes wait {
    from { transform: translateY(20px); }
    to { transform: translateY(20px); }
}

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

Клаудиу
источник

0

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

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

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

S3C
источник

0

Еще более простое решение (все еще с javascript [одной строкой]):

Используйте это как тег body: Обратите внимание, что body.или this.у меня не получилось. Только длинный; querySelectorразрешить использование classList.remove(Linux Chromium)

<body class="onload" onload="document.querySelector('body').classList.remove('onload')">

и добавьте эту строку поверх ваших других правил CSS.

body.onload *{ transform: none !important; }

Обратите внимание, что это может применяться к непрозрачности (в соответствии с запросом OP [другие авторы]), просто используя вместо этого непрозрачность в качестве триггера перехода. (может даже работать на любом другом решении CSS таким же образом, и вы можете использовать несколько классов для задержки экспликации между запусками)

Логика та же. Не применять преобразование (со :none !importantвсеми дочерними элементами body.onloadи после загрузки документа удалите класс, чтобы инициировать все переходы для всех элементов, как указано в вашем CSS.

ПЕРВЫЙ ОТВЕТ НИЖЕ (СМ. РЕДАКТИРОВАТЬ ВЫШЕ ДЛЯ ОТВЕТА НА ШОРТЕР)

Вот обратное решение:

Создайте HTML-макет и установите CSS в соответствии с вашим конечным результатом (со всеми необходимыми преобразованиями).
Установите свойство перехода по своему вкусу
добавьте класс (например, waitload) к элементам, которые вы хотите преобразовать ПОСЛЕ загрузки. CSS ключевое слово ! Важно это ключевое слово здесь.
Как только документ загружен, используйте JS, чтобы удалить класс из элементов, чтобы начать преобразование (и удалите переход: нет переопределения).

Работает с несколькими переходами на несколько элементов. Не пробовал кросс-браузерную совместимость.

#rotated{
    transform : rotate(90deg) /* any other transformation */;
    transition  3s;
}
#translated{
    transform : translate(90px) /* any other transformation */;
    transition  3s;
}
.waitload{
    transform: none !important;
}

<div id='rotated' class='waitload'>
    rotate after load
</div>
<div id='translated' class='waitload'>
    trasnlate after load
</div>
<script type="text/javascript">
     // or body onload ?
    [...document.querySelectorAll('.waitload')]
        .map(e => e.classList.remove('waitload'));

</script>

Луи Лоудог Троттье
источник

-2

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

Рич Брэдшоу
источник

17

Почему этот ответ был принят? Это на самом деле ничего не делает, что вопрос задан. Он просто (и очень быстро, иногда незаметно) запускает элемент невидимым, ждет небольшую долю секунды (200 мс) и мгновенно снова делает его видимым. Это не исчезает, последний раз я проверял.

VoidKing

Вы бы включили переход css на #id_to_fade in, хотя я согласен, это не так ясно из ответа.

Рич Брэдшоу

например, добавить еще один .css ({transition: 'opacity 2s'}) к вызову jQuery? Или только в вашем css? У меня такое чувство, что я чувствую, что это глупый вопрос ...

VoidKing

3

Все в порядке - я должен был выложить демо действительно. В CSS #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, -moz-префиксы , а также.

Рич Брэдшоу

2

Это не должен быть принятый ответ, использование ключевых кадров - путь.

Эдуардо Наведа

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

Ответы:

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

Сломай...