Почему моя анимация не играет?

Я следовал короткому руководству, чтобы создать прыгающую стрелу, однако код, который я использовал, почти так же исключает небольшие отличия.Почему моя анимация не играет?

Однако, когда я добавляю его в свой блок героя, он не воспроизводит мою анимацию.

Это может быть transform или keyframe Примеси, которые я использовал ...

Вот JSFiddle: http://jsfiddle.net/x9hxfusa/

источник

2015-06-10 rshah

Вы со ссылкой на эту анимацию: http://codepen.io/dodozhang21/pen/siKtp? – AGE

Да, эта анимация, у меня есть близкий точный код, и он все еще не работает – rshah

Вы забыли включить @import «compass/css3» в начале? – AGE

Место keyframes & mixins объявления в верхней части. Вы должны объявить их, прежде чем звонить им.

See Demo

источник

2015-06-10 18:28:40 Oriol

Это не только ключевые кадры, но и миксины – AGE

Исправить. Микшины действуют как переменные, которые необходимо определить заранее. См. Обновленный ответ. – Oriol

Смешная вещь, я пробовал делать это около 30 минут назад, и она не работала, потому что я забыл обновить свой браузер. Ну, борьба заставило меня придумать более простое решение, основанное на коде, я надеюсь, что OP выиграет от обоих наших ответов. – AGE

Я отлажен и упростил свой код, я думаю, что вы можете организовать сама анимация будет более гладкой, по вашему вкусу. Не забудьте добавить поддержку кросс-браузер или по крайней мере использовать SCSS управлять им: jsFiddle

CSS

body { background-color: black; } 

.arrow { 
    position: absolute; 
    bottom: 10px; 
    left: 50%; 
    margin-left: -20px; 
    width: 40px; 
    height: 40px; 
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); 
    background-size: contain; 
} 

.bounce { 
    -webkit-animation: bounce 2s infinite; 
} 

@-webkit-keyframes bounce { 
    0%  { bottom:5px; } 
    25%, 75% { bottom:15px; } 
    50%  { bottom:20px; } 
    100%  { bottom:0; } 
}

Я также думаю, что ключевым вопросом является с Mixins, однако я перемешивалась от него, чтобы найти более простое решение для тебя.

Редактировать: Я попытался сделать следующее изначально, но я пропустил обновление jsFiddle и пропустил очевидное решение, которое теперь выделено @Oriol. В любом случае проблема заключается в том, что ваш код ключевого кадра & размещается после кода анимации (или в верхней части вашего CSS для простоты). Если вы хотите сохранить свой код, как это сделать, или вы можете попробовать мое упрощенное решение.

источник

2015-06-10 18:05:16 AGE

Вы должны объявить

@mixin transform($transforms) { 
-moz-transform: $transforms; 
-o-transform: $transforms; 
-ms-transform: $transforms; 
-webkit-transform: $transforms; 
transform: $transforms; 
} 

@mixin keyframes($animation-name) { 
    @-webkit-keyframes $animation-name { 
    @content; 
} 
@-moz-keyframes $animation-name { 
    @content; 
} 
@-ms-keyframes $animation-name { 
    @content; 
} 
@-o-keyframes $animation-name { 
    @content; 
} 
@keyframes $animation-name { 
    @content; 
} 
} 

@mixin animation($str) { 
-webkit-animation: #{$str}; 
-moz-animation: #{$str}; 
-ms-animation: #{$str}; 
-o-animation: #{$str}; 
animation: #{$str};  
}

, прежде чем включать в себя ключевые кадры и преобразования. Вы также должны установить класс отказов по-другому (убрать «»):

.bounce { 
    @include animation(bounce 2s infinite); 
}

http://jsfiddle.net/uth333cg/

источник

2015-06-10 19:27:30 Fabrizio

Почему моя анимация не играет?

ответ

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