CSS3 Arrow анимация не работает

Я пытаюсь анимировать стрелу вниз, чтобы указать прокрутку вниз в параллуксе. У меня есть этот код от Codepen. См. Здесь рабочую демонстрацию: CodePen arrow animation CSS3 Arrow анимация не работает

Я точно использую тот же код на своем сайте, но он не оживляет. Стрелка отображается, но она не оживляет. Что я делаю неправильно?

HTML:

<div class="encircle bounce animated"> 
<div class="arrow"> 
</div> 
</div>

CSS:

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

@include keyframes(bounce) { 
    0%, 20%, 50%, 80%, 100% { 
    @include transform(translateY(0)); 
    } 
    40% { 
    @include transform(translateY(-20px)); 
    } 
    60% { 
    @include transform(translateY(-10px)); 
    } 
} 


body { 
    background: black; 
} 

.encircle { 
    width:60px; 
    height:60px; 
    border-radius:60px; 
    border: solid 2px white; 
    position: fixed; 
    bottom: 0; 
    left: 50%; 
} 

.arrow { 
    margin:0 auto; 
    margin-top: 13px; 
    width: 30px; 
    height: 30px; 
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); 
    background-size: contain; 
} 

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

источник

2015-04-10 Faizan

Вы знаете, что вы используете SCSS (SASS), не CSS3, верно? – taylorc93

@ taylorc93 О, я только что узнал, да. Раньше я никогда не слышал о SASS. Есть ли какой-нибудь чистый способ CSS3 для этой анимации? Или как настроить SASS для запуска на моем сайте? Я ищу что-то легкое, что работает. – Faizan

Проще всего сделать, чтобы скомпилировать SCSS, вы должны использовать обычный CSS и попробовать это. http://sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass – taylorc93

Вы SASS исходный код и он не будет работать для вас, если вы просто включите его как файл CSS. вам нужен SASS предварительный компилятор или непосредственно использовать сгенерированный CSS

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-20px); 
    -moz-transform: translateY(-20px); 
    -ms-transform: translateY(-20px); 
    transform: translateY(-20px); 
    } 
    60% { 
    -webkit-transform: translateY(-10px); 
    -moz-transform: translateY(-10px); 
    -ms-transform: translateY(-10px); 
    transform: translateY(-10px); 
    } 
} 
@-moz-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-20px); 
    -moz-transform: translateY(-20px); 
    -ms-transform: translateY(-20px); 
    transform: translateY(-20px); 
    } 
    60% { 
    -webkit-transform: translateY(-10px); 
    -moz-transform: translateY(-10px); 
    -ms-transform: translateY(-10px); 
    transform: translateY(-10px); 
    } 
} 
@-ms-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-20px); 
    -moz-transform: translateY(-20px); 
    -ms-transform: translateY(-20px); 
    transform: translateY(-20px); 
    } 
    60% { 
    -webkit-transform: translateY(-10px); 
    -moz-transform: translateY(-10px); 
    -ms-transform: translateY(-10px); 
    transform: translateY(-10px); 
    } 
} 
@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% { 
    -webkit-transform: translateY(0); 
    -moz-transform: translateY(0); 
    -ms-transform: translateY(0); 
    transform: translateY(0); 
    } 
    40% { 
    -webkit-transform: translateY(-20px); 
    -moz-transform: translateY(-20px); 
    -ms-transform: translateY(-20px); 
    transform: translateY(-20px); 
    } 
    60% { 
    -webkit-transform: translateY(-10px); 
    -moz-transform: translateY(-10px); 
    -ms-transform: translateY(-10px); 
    transform: translateY(-10px); 
    } 
} 
body { 
    background: black; 
} 

.encircle { 
    width: 60px; 
    height: 60px; 
    border-radius: 60px; 
    border: solid 2px white; 
    position: fixed; 
    bottom: 0; 
    left: 50%; 
} 

.arrow { 
    margin: 0 auto; 
    margin-top: 13px; 
    width: 30px; 
    height: 30px; 
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNTEycHgiIGhlaWdodD0iNTEycHgiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA1MTIgNTEyIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0yOTMuNzUxLDQ1NS44NjhjLTIwLjE4MSwyMC4xNzktNTMuMTY1LDE5LjkxMy03My42NzMtMC41OTVsMCwwYy0yMC41MDgtMjAuNTA4LTIwLjc3My01My40OTMtMC41OTQtNzMuNjcyICBsMTg5Ljk5OS0xOTBjMjAuMTc4LTIwLjE3OCw1My4xNjQtMTkuOTEzLDczLjY3MiwwLjU5NWwwLDBjMjAuNTA4LDIwLjUwOSwyMC43NzIsNTMuNDkyLDAuNTk1LDczLjY3MUwyOTMuNzUxLDQ1NS44Njh6Ii8+DQo8cGF0aCBmaWxsPSIjRkZGRkZGIiBkPSJNMjIwLjI0OSw0NTUuODY4YzIwLjE4LDIwLjE3OSw1My4xNjQsMTkuOTEzLDczLjY3Mi0wLjU5NWwwLDBjMjAuNTA5LTIwLjUwOCwyMC43NzQtNTMuNDkzLDAuNTk2LTczLjY3MiAgbC0xOTAtMTkwYy0yMC4xNzgtMjAuMTc4LTUzLjE2NC0xOS45MTMtNzMuNjcxLDAuNTk1bDAsMGMtMjAuNTA4LDIwLjUwOS0yMC43NzIsNTMuNDkyLTAuNTk1LDczLjY3MUwyMjAuMjQ5LDQ1NS44Njh6Ii8+DQo8L3N2Zz4=); 
    background-size: contain; 
} 

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

читать больше о SASS

источник

2015-04-10 14:30:47

Спасибо, что предоставил мне CSS. Тем не менее, я до сих пор не понимаю, как вы получили этот сгенерированный CSS? Как преобразовать SAAS в CSS? Вы только что скопировали код из элемента проверки браузера? – Faizan

Вы можете установить предварительный компилятор ** SASS ** или просто просмотреть сгенерированный ** css ** в [фрагменте кода] (http://codepen.io/szs/pen/JhgKC?editors=110), используя хром консоль. –

CSS3 Arrow анимация не работает

ответ

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