search

rnosov / react-reveal

Easily add reveal on scroll animations to your React app
https://www.react-reveal.com/
MIT License
2.73k stars 181 forks source link

Delay doesn't work with Custom CSS effects #93

Open cmdalbem opened 4 years ago

cmdalbem commented 4 years ago

When using a custom CSS effect with delay the element is rendered, normally, and after the delay the effect takes places.

React:

<Reveal effect="blurIn" delay={500}>
    <img .../>
</Reveal>

CSS:

@keyframes blurIn {
  from { 
    filter: blur(30px);
    opacity: 0.7;
  }

  to {
    filter: blur(0);
    opacity: 1;
  }
}
.blurIn {
  animation-name: blurIn;
}

Result

sravanreddy29 commented 4 years ago

It's not working for me either. but it works with css animation delay