0

CSS filter animations

Hi,
I am trying to fake a polaroid effect on a background-image, after flying it in, but I can't get it to work properly on a Brightsign. Is filter something that is not supported or does it need to be coded another way?
The .loaded class is added by javascript after loading the image.

css:
a {
  margin-top: -100vw;
  transition: all 1s ease-out;
}

a.loaded {
   margin-top: 0vw;
}

a .img {
  display: block;
  width: 250px;
  height: 250px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: black;
  -webkit-filter: brightness(-50%) sepia(100%);
  opacity: 0.9;
  -webkit-transition: all 4s ease-in .5s;
}

a.loaded .img {
  -webkit-filter: brightness(100%) sepia(0%);
  opacity: 1;
}

1 comment

Please sign in to leave a comment.