Как мне анимировать элемент качаться в CSS3? - PullRequest
Новая
       1

Как мне анимировать элемент качаться в CSS3?

4 голосов
/ 28 марта 2012

С тех пор как я увидел веб-сайт Treahouse и эффект знака, качающийся в дереве, я пытался воспроизвести его. 

.box{
    width:50px; height:50px;
    background: blue;
    box-shadow: 0 0 5px blue;
    margin:100px;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
}

Но это не будет качаться.

Вот демонстрация JS Fiddle .

Я также попытался изменить это. 

bod{
  background:blue;
}
.box{
    width:50px; height:50px;
    background: yellow;
    box-shadow: 0 0 10px red,0 0 25px red inset;
    margin:100px;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    border-radius:50%;
}
@-webkit-keyframes swing {
 from {
   left: -2px;
 }
 to {
   left: 200px;
 }
}

Но это тоже не работает. Посмотрите демонстрацию на JS Fiddle .

Ответы [ 2 ]

17 голосов
/ 28 марта 2012

Возможно, вы захотите попробовать использовать transform: rotate() и, как в комментарии sven, измените префикс на «-moz-», а не «-webkit-», потому что вы используете анимацию mozilla.

Вот пример: http://jsfiddle.net/gVCWE/14/

.box{
    width:50px; height:50px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    -webkit-animation:swing 3s infinite ease-in-out;
    -webkit-transform-origin:top;
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}

Кроме того, причина, по которой они имеют -moz-transform-origin: center top;, заключается в том, что он вращается вокруг вершины, поэтому использование left: -2px влево: 200px не имеет смысла.

РЕДАКТИРОВАТЬ: новый пример jsfiddle: http://jsfiddle.net/gVCWE/20/

0 голосов
/ 04 декабря 2014

Когда я использовал вышеуказанный метод, он работал нормально во всех браузерах, кроме IE. Используя приведенный ниже код, «качели» будут работать в IE10 и IE11. Так печально, что IE9 не смог этого сделать; P 

.box{
    width:50px; height:50px;
    background: yellow;
    border: 1px solid black;
    margin:100px;
    position: relative;
    float: left;
    -moz-animation: 3s ease 0s normal none infinite swing;
    -moz-transform-origin: center top;
    -webkit-animation:swing 3s infinite ease-in-out;
    -webkit-transform-origin:top;
    -ms-animation:swing 3s infinite ease-in-out;
    -ms-transform-origin:top;
}

@-moz-keyframes swing{
    0%{-moz-transform:rotate(-3deg)}
    50%{-moz-transform:rotate(3deg)}
    100%{-moz-transform:rotate(-3deg)}
}
@-webkit-keyframes swing{
    0%{-webkit-transform:rotate(-3deg)}
    50%{-webkit-transform:rotate(3deg)}
    100%{-webkit-transform:rotate(-3deg)}
}
@-ms-keyframes swing{
    0%{-ms-transform:rotate(-3deg)}
    50%{-ms-transform:rotate(3deg)}
    100%{-ms-transform:rotate(-3deg)}
}
...