Как установить высоту анимации на 100%

Question

Как установить высоту анимации на 100%

0

Я возился с анимацией CSS, потому что они довольно избивают задницу.

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

Мой CSS:

body{
    overflow: hidden;
    padding: 0;
    overflow-x: hidden
}
div {
-webkit-animation:myfirst 4s; /* Safari and Chrome */
-webkit-animation-fill-mode: forwards;
font-size: .2px;
padding-left: 5px;
}
@-webkit-keyframes myfirst /* Safari and Chrome */{
    0% {
        background:orange;
        width: 100px;
        height: 100px;
        -webkit-transform:rotate(360deg);
        opacity: 0.7;
    }
    100% {
        background:orange;
        width: 100px;
        height: 100%;
        -webkit-transform:rotate(360deg);
        opacity: 0.7;
        font-size: 16px;
    }

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/sidebar_left.css">
</head>
<body>

<div></div>

</body>
</html>

jsFiddle

Pixel Reaper 08 нояб. 2013, в 16:45

Источник

Теги:

html

css

css3

animation

1 ответ

Ещё вопросы

Joe · Answer 1 · 2013-11-08T13-43-00.000Z

чтобы установить высоту элементов как 100% высоты страницы - его прямым родителем должен быть элемент body а элементы body & html также должны иметь высоту 100%... если ваш элемент дополнительно вложен в dom, вы также можете просто продолжайте цепочку 100% высоты для всех своих родителей и родителей родителей... и т.д.

html элемент также должен быть на 100% .
Ага! Тело и элемент HTML должны быть установлены на 100% ширины и высоты. Спасибо вам, ребята!
обновил ответ, я сделал это в моем тесте, но забыл упомянуть об этом здесь - должно быть время, чтобы захватить тот кофе