I can't used @keyframes with NextJs

[enderlabo]

hi everyone i tri it used an animation with css (@import, @keyframes) but i can't i used <_JTSStyle>

this is .css

@import` url('https://fonts.googleapis.com/css?family=Montserrat:400,600,700'); @import url('https://fonts.googleapis.com/css?family=Catamaran:400,800');

.error-container { text-align: center; font-size: 180px; font-family: 'Catamaran', sans-serif; font-weight: 800; margin: 20px 15px; } .error-container > span { display: inline-block; line-height: 0.7; position: relative; color: #FFB485; } .error-container > span > span { display: inline-block; position: relative; } .error-container > span:nth-of-type(1) { perspective: 1000px; perspective-origin: 500% 50%; color: #F0E395; } .error-container > span:nth-of-type(1) > span { transform-origin: 50% 100% 0px; transform: rotateX(0); animation: easyoutelastic 8s infinite; }

.error-container > span:nth-of-type(3) { perspective: none; perspective-origin: 50% 50%; color: rgb(238, 95, 95); } .error-container > span:nth-of-type(3) > span { transform-origin: 100% 100% 0px; transform: rotate(0deg); animation: rotatedrop 8s infinite; }

@keyframes easyoutelastic { 0% { transform: rotateX(0); } 9% { transform: rotateX(210deg); } 13% { transform: rotateX(150deg); } 16% { transform: rotateX(200deg); } 18% { transform: rotateX(170deg); } 20% { transform: rotateX(180deg); } 60% { transform: rotateX(180deg); } 80% { transform: rotateX(0); } 100% { transform: rotateX(0); } }

@keyframes rotatedrop { 0% { transform: rotate(0); } 10% { transform: rotate(30deg); } 15% { transform: rotate(90deg); } 70% { transform: rotate(90deg); } 80% { transform: rotate(0); } 100% { transform: rotateX(0); } }

/* demo stuff */

• { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { background-color: #f4f4f4; margin-bottom: 50px; } html, button, input, select, textarea { font-family: 'Montserrat', Helvetica, sans-serif; color: #bbb; } h1 { text-align: center; margin: 30px 15px; } .zoom-area { max-width: 490px; margin: 30px auto 30px; font-size: 19px; text-align: center; } .link-container { text-align: center; } a.more-link { text-transform: uppercase; font-size: 13px; background-color: #bbb; padding: 10px 15px; border-radius: 0; color: #fff; display: inline-block; margin-right: 5px; margin-bottom: 5px; line-height: 1.5; text-decoration: none; margin-top: 50px; letter-spacing: 1px; }` ``

</code

====================================================================================================================================== import``` React from 'react' return (

{this.props.statusCode ? An error ${this.props.statusCode} occurred on server :

Error 404 page don't found.

<p className='zoom-area'> Can't find it <section className='error-con'> 4 0 4 <div className='link-container'> <a target='_blank' className='jsx-1'>Contac Us

<ThemeProvider theme={theme}> <Button onClick={() => this.goAbout('index')}>Go Back</Button> </ThemeProvider>

      </div>
    }
    <_JSXStyle styleId='1' css={`a.jsx-1 {
      text-transform: uppercase;
    font-size: 13px;
    background-color: #bbb;
    padding: 10px 15px;
    border-radius: 0;
    color: #fff;
    display: inline-block;
    margin-right: 5px;
    margin-bottom: 5px;
    line-height: 1.5;
    text-decoration: none;
    margin-top: 50px;
    letter-spacing: 1px;}`} />

    <_JSXStyle styleId='link-container' css={` 
      div.link-container {
        text-align: center;
    } 
    `} />

    <_JSXStyle styleId='zoom-area' css={`
      p.zoom-area{
        max-width: 490px;
        margin: 30px auto 30px;
        font-size: 19px;
        text-align: center;
      }
    `} />

    <_JSXStyle styleId='h1' css={`h1{
        text-align: center;
        margin: 30px 15px;
      } 
    `} />

    <_JSXStyle styleId='' css={`html, button, input, select, textarea{
        font-family: 'Montserrat', Helvetica, sans-serif;
        color: #bbb;
    }`} />

    <_JSXStyle styleId='body' css={`body{
      background-color: #f4f4f4;
      margin-bottom: 50px;
    }`} />

    <_JSXStyle styleId='*' css={`*{
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }`} />

    <_JSXStyle styleId='error-container' css={`.error-container > span:nth-of-type(3) > span{
      transform-origin: 100% 100% 0px;
      transform: rotate(0deg);
      animation: rotatedrop 8s infinite;
    }`} />

    <_JSXStyle styleid='error-container' css={`.error-container > span:nth-of-type(3){
      perspective: none;
      perspective-origin: 50% 50%;
      color: rgb(238, 95, 95);
    }`} />

    <_JSXStyle styleId='error-container' css={`.error-container > span:nth-of-type(1) > span{
      transform-origin: 50% 100% 0px;
      transform: rotateX(0);
      animation: easyoutelastic 8s infinite;
    }`} />

    <_JSXStyle styleId='error-container' css={`.error-container > span:nth-of-type(1){
      perspective: 1000px;
      perspective-origin: 500% 50%;
      color: #F0E395;
    }`} />

    <_JSXStyle styleId='error-container' css={`.error-container > span:nth-of-type(1){
      perspective: 1000px;
      perspective-origin: 500% 50%;
      color: #F0E395;
    }`} />

    <_JSXStyle styleId='error-container' css={`.error-container > span > span{
      display: inline-block;
      position: relative;
    }`} />

    <_JSXStyle styleId='error-con' css={`.error-con > span {
      display: inline-block;
      line-height: 0.7;
      position: relative;
      color: #FFB485;}`} />

    <_JSXStyle styleId='error-container' css={`.error-container {
          text-align: center;
          font-size: 180px;
          font-family: 'Catamaran', sans-serif;
          font-weight: 800;
          margin: 20px 15px;}`} />

    <_JSXStyle styleId='@keyframes' css={`easyoutelastic {
        0% {
          transform: rotateX(0);
        }
        9% {
          transform: rotateX(210deg);
        }
        13% {
          transform: rotateX(150deg);
        }
        16% {
          transform: rotateX(200deg);
        }
        18% {
          transform: rotateX(170deg);
        }
        20% {
          transform: rotateX(180deg);
        }
        60% {
          transform: rotateX(180deg);
        }
        80% {
          transform: rotateX(0);
        }
        100% {
          transform: rotateX(0);
        }
    }`} />

    <_JSXStyle styleId='@keyframes' css={`rotatedrop {
          0% {
            transform: rotate(0);
          }
          10% {
            transform: rotate(30deg);
          }
          15% {
            transform: rotate(90deg);
          }
          70% {
            transform: rotate(90deg);
          }
          80% {
            transform: rotate(0);
          }
          100% {
            transform: rotateX(0);
          }
  }`} />
  </div>
)

} } ``

[giuseppeg]

hi can you fix and reformat the code blocks? Also can you provide a sample Next.js application to reproduce the issue so that I can take a look?

[enderlabo]

hi can you fix and reformat the code blocks? Also can you provide a sample Next.js application to reproduce the issue so that I can take a look?

done, if you want i can up an repository

[giuseppeg]

@enderlabo that'd be great!

[enderlabo]

hi can you fix and reformat the code blocks? Also can you provide a sample Next.js application to reproduce the issue so that I can take a look?

https://gitlab.com/Ioness/ioness/2-reactjs-recipes/tree/Laborit

[giuseppeg]

is this still an issue?

[nk2580]

@giuseppeg i do seem to have this issue still but it relates to tailwind css syntax not being parsed when postcss is configured

[tommyboylab]

I'm finding this happening on latest NextJS with SCSS modules, and a simple image carousel.. Setting the opacity inline works as expected, but setting an animation with the keyframes in the SCSS imported fails

ex: This works: opacity: `${currentIndex === index ? 1 : 0}`,

This doesn't: animation: `${currentIndex === index ? 'fadeIn' : 'fadeOut') 5s ease-in-out`,

SCSS:

  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

[shved90]

Removed next-css and moved to latest 9.2 version with build in css support - can't build because of keyframes, which worked just fine before. Any fixes?