Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Keyframes not working #130

Open
tinaconrad opened this issue Sep 7, 2017 · 3 comments
Open

Keyframes not working #130

tinaconrad opened this issue Sep 7, 2017 · 3 comments

Comments

@tinaconrad
Copy link

Hello! I found a problem with this plugin. Not sure if I'm doing something wrong, but I followed every step on this page to make animated sprites:
http://blog.teamtreehouse.com/css-sprite-sheet-animations-steps
.monster {
width: 190px;
height: 240px;
background: url('monster-sprite.png') left center;
animation: play 0.8s;
}
@Keyframes play {
100% { background-position: -1900px; }
}
It was animating when I was using a different SASS compiler in another IDE, but when I used the sass-autocompile for atom, the animation went away. Is there anything I'm supposed to do to make this animation work? Thanks!

@IiroP
Copy link
Contributor

IiroP commented Feb 3, 2018

Can you post your output css from sass-autocompiler (not working) and some else compiler (working)?

@tinaconrad
Copy link
Author

If its working, there will be a CSS output like this one:

animation: handshake_sprite 3s steps(82) infinite;
@keyframes handshake_sprite { 
   100% { background-position: -25584px; }
}

If its not working, nothing shows up.

@armin-pfaeffle
Copy link
Owner

Hey Tina!

When I compile this file

.monster {
	width: 190px;
	height: 240px;
	background: url('monster-sprite.png') left center;
	animation: play 0.8s;
}
@keyframes play {
	100% { background-position: -1900px; }
}

This is the output -- which exactly is that what should be the result:

.monster {
    width: 190px;
    height: 240px;
    background: url("monster-sprite.png") left center;
    animation: play 0.8s;
}

@Keyframes play {
    100% {
        background-position: -1900px;
    }
}

Do you include other "libraries"?! Can you give me a simple example which demonstrates that bug?

Btw.: My package does not compile anything. It's only a wrapper for node-sass

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants