Каков правильный способ создания css на анимации загрузки страницы?

Мой вопрос не в том, как сделать анимацию, которая срабатывает при загрузке страницы, это лучший способ. Это означает, что:Каков правильный способ создания css на анимации загрузки страницы?

-Ответ.

-SEO friendly.

-Все мерцание.

Обычно я бы создал состояние .hidden или .offpage, которое не активировано (на всякий случай, если не работает javascript). Затем, когда страница загружается, javascript добавляет класс, чтобы скрыть их без перехода, а затем изменяет состояние с переходом.

Является ли этот метод более совершенным?

источник

2015-05-18 Vandervals

CSS3 не является решением вы думаете? –

Это, вероятно, есть, но немного странно использовать анимацию для не-декоративных целей ... – Vandervals

Что это значит? Цель - оживить что-то на странице загрузки. Единственный случай, когда мы будем использовать Javascript, чтобы показать или скрыть что-то, - это когда мы вызываем данные асинхронно, и мы хотим показать div только, если мы получили данные, чтобы избежать пустого поля. –

Для анимации вам не нужен Javascript. Вы можете просто использовать CSS3.

Example :

header { 
 
    background: #000; 
 
    color: #fff; 
 
    height: 20px; 
 
    position: relative; 
 
    padding: 10px; 
 
    -moz-animation-name: dropHeader; 
 
    -moz-animation-iteration-count: 1; 
 
    -moz-animation-timing-function: ease-in; 
 
    -moz-animation-duration: 0.3s; 
 
    -webkit-animation-name: dropHeader; 
 
    -webkit-animation-iteration-count: 1; 
 
    -webkit-animation-timing-function: ease-in; 
 
    -webkit-animation-duration: 0.3s; 
 
    animation-name: dropHeader; 
 
    animation-iteration-count: 1; 
 
    animation-timing-function: ease-in; 
 
    animation-duration: 0.3s; 
 
} 
 
header ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
header ul li { 
 
    display: inline-block; 
 
    margin-right: 20px 
 
} 
 
@-moz-keyframes dropHeader { 
 
    0% { 
 
    -moz-transform: translateY(-40px); 
 
    } 
 
    100% { 
 
    -moz-transform: translateY(0); 
 
    } 
 
} 
 
@-webkit-keyframes dropHeader { 
 
    0% { 
 
    -webkit-transform: translateY(-40px); 
 
    } 
 
    100% { 
 
    -webkit-transform: translateY(0); 
 
    } 
 
} 
 
@keyframes dropHeader { 
 
    0% { 
 
    transform: translateY(-40px); 
 
    } 
 
    100% { 
 
    transform: translateY(0); 
 
    } 
 
} 
 
/* Added for aesthetics */ 
 

 
body { 
 
    margin: 0; 
 
    font: normal 14px"Segoe UI", Arial, Helvetica, Sans Serif; 
 
} 
 
a { 
 
    color: #eee; 
 
    text-decoration: none; 
 
}

<header> 
 
    <ul> 
 
    <li><a href="#">Home</a> 
 
    </li> 
 
    <li><a href="#">About</a> 
 
    </li> 
 
    <li><a href="#">Products</a> 
 
    </li> 
 
    <li><a href="#">Contact</a> 
 
    </li> 
 
    </ul> 
 
</header>

источник

2015-05-18 13:47:50

Каков правильный способ создания css на анимации загрузки страницы?

ответ

Смежные вопросы