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

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



это своего рода то, что я хочу, но на странице загрузки:



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



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





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


  • ключевой кадр CSS3, работы по нагрузка, но чрезвычайно медленно. Не полезно из-за этого.


  • переход CSS3 достаточно быстро, но не анимации при загрузке страницы.

604   8  

8 ответов:

вы можете запустить 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 должен сказать.

351  
2017-04-05 09:24:39

очень мало 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, который необходим.

23  
2017-06-15 21:29:00

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

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

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

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

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

15  
2016-02-19 16:17:35

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

ответ "не очень".

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

по умолчанию CSS / DOM не предоставляет никакого состояния "on load" для использования CSS. Если бы вы хотели/могли использовать JavaScript, вы бы выделили класс body или что-то активировать некоторые стиль CSS.

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

мы действуем исходя из предположения, что "закрыть" - это "достаточно хорошо":

<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  
2017-10-03 20:06:11

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

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

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

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

1  
2014-08-04 18:34:16

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

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

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

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

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

1  
2017-11-21 17:10:51

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

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

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

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

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

0  
2012-07-18 23:32:29

не совсем, так как CSS применяется как можно скорее, но элементы могут еще не быть нарисованы. Вы могли догадаться задержка на 1 или 2 секунды, но это не будет выглядеть правильно для большинства людей, в зависимости от скорости их интернета.

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

Я бы рекомендовал использовать jQuery (для удобства используйте + вы можете добавить анимацию для других бас) и некоторые 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 в устаревших браузерах, если это необходимо.

-3  
2011-07-24 10:38:39

Comments

    Ничего не найдено.
Click here to cancel reply.