search

cssinjs / styled-jss

Styled Components on top of JSS.
http://cssinjs.org/styled-jss
MIT License
217 stars 25 forks source link

What about keyframes animation? #54

Open Grimones opened 6 years ago

Grimones commented 6 years ago

Do styled-jss support keyframes animations and what is the syntax? Unfortunately i wasn't able to get it work using example from here

kof commented 6 years ago

Should work, can you post your code?

lttb commented 6 years ago

Hi @Grimones, there is an example with Styled function:

https://www.webpackbin.com/bins/-Kx85LgRuU3lUjCrbnGW

Grimones commented 6 years ago

@kof It was sometime ago and i haven't saved it. I thought that i have missed something and was trying to search better. Now i came back to this and only one option left for me it was to open an issue to ask help.

@lttb Hi. Thanks for reply. Yep, it is working. May be there is syntax like styled-components use? something like 

const animation = keyframes({
  from: {opacity: 0},
  to: {opacity: 1}
})

const Item = styled('div')({
  animation: `${animation} 2s`
})
lttb commented 6 years ago

@Grimones we don't have such thing yet, but I think it's a nice to have feature. We'll try to support it soon

Grimones commented 6 years ago

@lttb Great! However thank you for pointing in right direction. Will proceed with Styled

sergeysova commented 6 years ago

Have any progress here?

kof commented 6 years ago

As of right now you can use https://github.com/cssinjs/styled-jss#base-style-sheet .