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

StackOverflow https://stackoverflow.com/questions/6805482

Вопрос

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

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

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

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

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

Решение

Ты Можно пробежать 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>

Сломай...

Важными частями здесь являются анимация ключей, которую мы называем 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.

Другие советы

Очень мало 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, который нужен.

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

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

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

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

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

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

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

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

По умолчанию CSS/DOM не предоставляет какого -либо вида «нагрузки» для использования 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 будет активирован последним.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Несколько моментов здесь:

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

Код:

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; }
}

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top