SCSS анимация не работает

Это мой SCCS код:SCSS анимация не работает

#logo{ 
    animation: zoomIn, 4s; 
} 

@mixin keyframes($name) { 
    @keyframes #{$name} { 
    @content; 
    } 
} 

// use of keyframes mixin 
@include keyframes(zoomIn) { 
    0% { 
    opacity: 0; 
    transform: scale3d(.3, .3, .3); 
    } 

    50% { 
    opacity: 1; 
    } 
}

И это мой HTML-код:

<!DOCTYPE html> 
<html> 
<head> 
    <title>Dako</title> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 
    <%= csrf_meta_tags %> 
</head> 
<body class='<%= controller.controller_name %>'> 
<div id="top"><%= image_tag('dako.png', id:'logo') %></div> 
...

Почему это не живой? Я пытался добавить префикс webkit-, но это мне не помогло.

источник

2015-04-07 Dmytro Hanzha

Это не проблема Sass, это проблема CSS. Предоставляйте только скомпилированные CSS и HTML. – cimmanon

Есть несколько проблем с вашим кодом scss;

Вам нужно добавить префикс -webkit перед обеими keyframes и animation
Убедитесь, что вы объявляете ключевые кадры, прежде чем использовать их (на данный момент #logo ищет animation: zoomIn, но он еще не существует)
Вы не должны иметь запятые в вашем animation заявлении

Ваш окончательный код должен выглядеть примерно так

//Keyframe Mixin 
@mixin keyframes($name) { 
    @keyframes #{$name} { 
    @content; 
    } 
    @-webkit-keyframes #{$name} { 
    @content; 
    } 
} 

// Create Keyframes 
@include keyframes(zoomIn) { 
    0% { 
    opacity: 0; 
    transform: scale3d(.3, .3, .3); 
    } 

    50% { 
    opacity: 1; 
    } 
} 

//Use Animation 
#logo{ 
    animation: zoomIn 3s; 
    -webkit-animation: zoomIn 3s; 
}

источник

2015-04-09 01:01:59 csilk

SCSS анимация не работает

ответ

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