анімація переходу css3 при завантаженні?

196

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

Це щось таке, що я хочу, але при завантаженні сторінки:

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

Що я знайшов поки що

  • CSS3 перехід-затримка , спосіб затримки впливу на елементи. Працює лише на наведення.
  • CSS3 Keyframe , працює на навантаженні, але надзвичайно повільний. Не корисно через це.
  • Перехід CSS3 досить швидкий, але не анімуйте при завантаженні сторінки.
css  webkit  css-transitions  css-animations 
— Єнс Торнелл
джерело
@blesh: майже нічого - дивіться, наприклад, mysociety.org/2011/08/11/mobile-operators-breaking-content and robertnyman.com/2006/04/25/…
— NickFitz
2
Ключові фоторамки досягнуть цього і забезпечать найкращий запасний варіант, коли анімації CSS3 не підтримуються. Чому ви вважаєте, що вони занадто повільні?
— zachleat
Привіт! Зараз посилання розірвано, і я не знаю, куди малося йти, чи може хтось це виправити!
— Linux4Life531

Відповіді:

460

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

— Кріс Шпітлз
джерело
20
Що робить цей запуск при завантаженні сторінки, а не будь-який раніше?
— Рольф
2
Просто для відповіді на вищезазначене питання, за замовчуванням анімація починається з 0 після її застосування, без затримки. Існує додаткова властивість, анімація-затримка, яку можна встановити для управління цим. Дивіться: w3.org/TR/css3-animations/#animation-delay-property
— Майкл Девіс
2
Щоб переконатися, що анімація розпочнеться після завантаження документа, помістіть код анімації в таблицю стилів під елементом тіла або тегом стилю в нижній частині елемента тіла.
— 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', 'load')">
— Іван
1
Якщо немає необхідності чекати сторінки події подіїLoad, вставте цей код перед тегом </body>: <script type = "text / javascript"> document.body.setAttribute ('class', 'load'); </script>
— Іван
7
Щоб уникнути переоцінки існуючих bodyкласів, використовуйте:document.body.classList.add('loaded)
— В’ячеслав Котрута
1
Я знайшов , document.body.className += " loaded";щоб бути трохи менш багатослівним для додавання в loadedклас до існуючих класів.
— Пім Шааф
1
@PimSchaaf Дякую за вашу пропозицію, це абсолютно має сенс. Я зараз його відредагую. Сьогодні ви також можете використовувати classList, який є трохи більш елегантним (але менш сумісним).
— Рольф
20

Я думаю, що я знайшов якусь роботу над питанням про ОП - замість того, щоб почався перехід "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.

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

Ми працюємо на припущенні, що "закрити" - "досить добре":

<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" визначено per @ Rolf, визначаючи перехід і встановлюючи непрозорість до початкового стану (тобто 0)

Єдина увага полягає в тому, що це не працює з елементами SPAN або DIV, оскільки у них немає події на завантаження

— user3907296
джерело
1

почніть його з наведення на тіло, ніж це почнеться, коли миша вперше рухатиметься по екрану, що здебільшого відбувається за секунду після прибуття.

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

ось найкраще, що я можу придумати: http://jsfiddle.net/faVLX/

повноекранний: http://jsfiddle.net/faVLX/embedded/result/

Редагувати див. Коментарі нижче:
Це не працюватиме на будь-якому сенсорному екрані, оскільки немає наведення курсору, тому користувач не побачить вміст, якщо не натисне його. - Багатий Бредшоу

— бородатий код
джерело
Так, я зрозумів це сам. Це нормальне рішення, якщо нічого іншого не працює. За це один голос.
— Jens Törnell
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 без затримки чи тривалості.

Мені цікаво знати погляди на те, наскільки цей метод зручний для пошукових систем. З моїм чорним капелюхом, я думаю, я міг би заповнити сторінку ключовими словами і застосувати затримку 9999s на її непрозорість.

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

Що ще важливіше, я хотів би знати, чому це не відповідає кожному завантаженню сторінки та як я можу це виправити!

Я сподіваюся, що це може породити певні погляди та думки, якщо нічого іншого!

— Майкл Уолінг
джерело
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

Ще простіше рішення (все ще з [одним рядком inline] javascript):

Використовуйте це як тіло тега: Зверніть увагу , що body.або this.не працює для мене. Лише довгий; querySelectorдозволити використання classList.remove(Linux Chromium)

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

і додайте цей рядок поверх інших ваших правил css.

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

Зауважте, що це може стосуватися непрозорості (як вимагає ОП [інші плакати]), просто використовуючи непрозорість як тригер переходу. (може навіть працювати на будь-якому іншому css-рішенні таким же чином, і ви можете використовувати кілька класів для чіткості затримки між запуском)

Логіка однакова. Примусово не перетворюйте (з :none !importantусіма дочірніми елементами body.onloadта після завантаження документа видаліть клас, щоб запустити всі переходи всіх елементів, як зазначено у вашому css.

ПЕРШИЙ ВІДПОВІДЬ НІЖ (ВИДІТЬСЯ РЕДАКЦІЮ ДЛЯ ВІДКРИТТЯ ВІДПОВІДУ)

Ось зворотне рішення:

  1. Створіть html-макет і встановіть css відповідно до вашого кінцевого результату (з усіма потрібними перетвореннями).
  2. Встановіть властивість переходу на свій смак
  3. додати клас (наприклад: очікування) до елементів, які потрібно перетворити ПІСЛЯ завантаження. Ключове слово тут важливе для ключового слова CSS !
  4. Після завантаження документа використовуйте 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. Ця перевага полягає в тому, що легко дозволяти використовувати анімацію замість другого CSS у застарілих браузерах, якщо потрібно.

— Багатий Бредшоу
джерело
17
Чому ця відповідь була прийнята? Це насправді не робить нічого, про що задавали питання. Він просто (і дуже швидко, іноді непомітно) запускає елемент невидимо, чекає невеликої частки секунди (200 мс), а потім миттєво робить його знову видимим. Це не зникнення, востаннє я перевірив.
— VoidKing
Ви б включили перехід css на тему #id_to_fade in, хоч я згоден, це не все ясно з відповіді.
— Річ Бредшоу
як у, додайте інший .css ({перехід: 'opacity 2s'}) у виклик jQuery? Або просто у своєму css? У мене таке відчуття, що я відчуваю, що це дурне питання ...
— VoidKing
3
Це нормально - я мав би справді поставити демонстрацію. У CSS, #id_to_fade_in { -webkit-transition:opacity 0.5s ease-in-out; }+ -o-, також -moz-префікси.
— Річ Бредшоу
2
Це не повинно бути прийнятою відповіддю, тому що використовувати ключові кадри - це шлях.
— Едуардо Наведа
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.