CSS animation value changes after "gatsby build" process

[lucasboh]

Description

I'm developing a website for a client using Gatsby, and I'm having the following problem after I make the gatsby build process. In the CSS stylesheet for the menu component (I'm using CSS modules) I've created an animation in order to change the opacity of the links from 0% to 100%, when the menu dropdown is activated:

.dropdown a {
  margin-bottom: 35px;
  font-size: 18px;
  opacity: 0%;
  animation-name: fadeIn;
  animation-duration: 1.5s;
  animation-delay: 0.3s;
  animation-fill-mode: forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0%;
  }
  to {
    opacity: 100%;
  }
}

While using gatsby develop it works fine, but after the build process the stylesheets are changed and instead of "100%" the value is "1%". Here is a copy of the stylesheet editor of the Firefox dev tools:

.menu-module--dropdown--20KXD a {
 margin-bottom:35px;
 font-size:18px;
 opacity:0;
 animation-name:menu-module--fadeIn--1YSeo;
 animation-duration:1.5s;
 animation-delay:.3s;
 animation-fill-mode:forwards
}
@keyframes menu-module--fadeIn--1YSeo {
 0% {
  opacity:0
 }
 to {
  opacity:1%
 }
}

I've also reproduced this prolem with other browsers and values without success.

Steps to reproduce

I've made my repo public in order that you can access it and test the code: https://github.com/lucasboh/allineapilates
Please use Firefox to reproduce the problem, beacuse I've just realized that there is an unrelated display bug with the menu when using chrome :)
The CSS file in question is menu.module.css.

Expected result

The opacity value should be 100% after the build process

Actual result

The opacity value is 1%.

Thank you in advance!

Environment

System:
OS: macOS 10.15.3
CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.13.1 - /usr/local/bin/node
npm: 6.14.4 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 80.0.3987.149
Firefox: 74.0
Safari: 13.0.5
npmPackages:
gatsby: ^2.19.45 => 2.19.45
gatsby-image: ^2.2.44 => 2.2.44
gatsby-plugin-manifest: ^2.3.2 => 2.3.2
gatsby-plugin-offline: ^3.0.41 => 3.0.41
gatsby-plugin-react-helmet: ^3.1.24 => 3.1.24
gatsby-plugin-sharp: ^2.5.2 => 2.5.2
gatsby-source-filesystem: ^2.1.56 => 2.1.56
gatsby-transformer-sharp: ^2.4.2 => 2.4.2
npmGlobalPackages:
gatsby-cli: 2.11.3

[herecydev]

Their is a bug in css nano that has been fixed but not released yet. This will only run in production, for now the best "fix" is to use a fraction, i.e. opacity: 1

[lucasboh]

Oh okay! The fix works perfectly, thank you!

[madalynrose]

Thank you so much for answering this issue @herecydev and I'm so glad it solved your problem @lucasboh!

[doublejosh]

My nugget of wisdom to solve this is that Gatsby turns 100% into 1% ...so you need to use 100.

dbramwell/react-animate-on-scroll#52 (comment)