Question

这是我的sccs代码：

#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-，但它对我没有帮助。

Answer 1

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;
}

SCSS动画不起作用

1 个答案: