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

Question

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

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

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

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

Что я пока нашел

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

171

css css3 webkit css-transitions css-animations

задан BoltClock 28 July 2012 в 18:15

2 ответа

Другие вопросы по тегам:

css css3 webkit css-transitions css-animations

Похожие вопросы:

score 0 · Answer 1

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

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

score 0 · Answer 2

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

несколько точек для взятия здесь:

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

Код:

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