[英]How to use Compass Animation for Compass SCSS framework?
我正在嘗試使用指南針動畫 ,但它似乎不起作用。
以下是我的文件設置方式:
Config.rb
# Require any additional compass plugins here.
require 'animation'
Screen.scss
@import "compass";
@import "compass/reset";
@import "animation";
@import "animation/animate";
@import "animation/animate/classes";
.widget:hover {
@include animation(flipOutY);
background:pink;
}
body {
background:red;
}
的index.html
<a href="#" class="widget">Click Me</a>
這是我的CSS的輸出:
@-moz-keyframes flipOutY {
/* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
0% {
-moz-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
/* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
100% {
-moz-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; } }
@-webkit-keyframes flipOutY {
/* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
0% {
-webkit-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
/* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
100% {
-webkit-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; } }
@-o-keyframes flipOutY {
/* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
0% {
-o-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
/* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
100% {
-o-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; } }
@-ms-keyframes flipOutY {
/* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
0% {
-ms-transform: perspective(400px) rotateY(0deg);
transform: perspective(400px) rotateY(0deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
/* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
100% {
-ms-transform: perspective(400px) rotateY(90deg);
transform: perspective(400px) rotateY(90deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; } }
@keyframes flipOutY {
/* line 79, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
0% {
transform: perspective(400px) rotateY(0deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
/* line 83, ../../../../../../../../Library/Ruby/Gems/1.8/gems/animation-0.1.alpha.3/stylesheets/animation/animate/_flippers.scss */
100% {
transform: perspective(400px) rotateY(90deg);
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; } }
.widget:hover {
-webkit-animation: flipOutY;
-moz-animation: flipOutY;
-ms-animation: flipOutY;
-o-animation: flipOutY;
animation: flipOutY;
background: pink;
}
但是,它似乎沒有起作用。 有人可以解釋我做錯了什么。 謝謝!
我認為需要持續時間才能使其工作。 這是自述文件中的一個錯誤。
(你還應該注意到Compass Animation不再真正被維護 - 因為它正在進入Compass Core for 0.13版本。我建議使用Compass的主分支,而使用Compass-Animate 。這些更好地維護。)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.