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;
}

2 comments

  • 0
    Avatar
    Bright Scripters

    Please consult with this documentation page, and notice the version of Chromium currently being used.

    https://docs.brightsign.biz/display/DOC/HTML+Best+Practices

  • 0
    Avatar
    Xavier Gruselle

    I face the same issue: tried both "-webkit-transition" and "transition" - the transitions work fine on my laptop with Chromium 69 (current version) but not on a Brightsign player. Is this filter supported or not? Any alternative?

    Thanks!

Please sign in to leave a comment.