Анимация отказов не будет работать - PullRequest
Новая
       1

Анимация отказов не будет работать

0 голосов
/ 23 января 2012

Я пытаюсь отскочить от <div>, содержащего изображение, но это не сработает, и я не уверен, почему.

Это мой код: 

@keyframes bounce
{
    from {
        left: 0px;
    }
    to {
        right: 30px;
    }
}

@-moz-keyframes bounce /* Firefox */
{
    from {
        left: 0px;
    }
    to {
        right: 30px;
    }
}

@-webkit-keyframes bounce /* Safari and Chrome */
{
    from {
        left: 0px;
    }
    to {
        right: 30px;
    }
} 

#DanielFace
{
    background-repeat: no-repeat;
    width: 145px;
    height: 165px;
    background-image: url(../images/daniel/fun.png);
    animation: bounce 1s;
    -moz-animation: bounce 1s; /* Firefox */
    -webkit-animation: bounce 1s; /* Safari and Chrome */
}

Ответы [ 2 ]

1 голос
/ 23 января 2012

Это из-за двух вещей.

Сначала left и right ничего не сделают с объектом, заданным этим CSS. Эти значения будут применяться, только если position элемента отличается от static (по умолчанию).

Во-вторых, они являются конфликтующими значениями, поэтому вы не получите нужный вам анимационный эффект. То, что вы сейчас говорите, в основном растягивает этот элемент, за исключением того, что вы дали ему статическую ширину, чтобы он не стал. Что именно вы хотите, чтобы изображение делало на вашей странице?

1 голос
/ 23 января 2012

Причина в том, что вы используете два разных свойства, right и left.Хотя они оба расположены, вы должны использовать одно и то же свойство для выполнения перехода.Если ваш контейнер фиксированной ширины, то это просто;просто используйте left вместо right или наоборот для from и to.

С другой стороны, если ширина является динамической, вам не повезло;используйте вместо этого JavaScript.

...