new background animation behaves unexpectedly

Checklist

• I updated the card to the latest version available
• I cleared the cache of my browser

Describe the bug A clear and concise description of what the bug is.

the new animation (for which a big thanks is in order: thanks!) doesnt work 100% just yet After a few cache clearances, it seems to start off well, but after a little while blacks out, and stops all together so it seems.

Version of the card Version: 3.2.0

To Reproduce This is the configuration I used:

extra_styles: |
  @keyframes bgswap1 {
    0% {
      background-image: url("/local/mijnafvalwijzer/kliko_geen.png");
    }
    25% {
      background-image: url("/local/mijnafvalwijzer/kliko_geen.png");
    }
    50% {
      background-image: url("/local/mijnafvalwijzer/plastic.png");
    }
    75% {
      background-image: url("/local/mijnafvalwijzer/plastic.png");
    }
    100% {
      background-image: url("/local/mijnafvalwijzer/kliko_geen.png");
    }
  }

styles:
  label:
    - text-transform: capitalize
    - font-size: 13px
    - font-weight: bold
    - color: var(--paper-card-background-color) #var(--primary-background-color)
#    - background-color: >
#       [[[ return states['sensor.trash_color'].state ]]]
#    - align-self: end
    - position: absolute
    - bottom: 1%
    - right: 50%
    - transform: translateX(+50%)
  card:
#    - background-image: >
#        [[[ return `url("${entity.attributes.entity_picture}")`; ]]]
#        [[[ return `url("/local/mijnafvalwijzer/kliko_geen.png,/local/mijnafvalwijzer/plastic.png")`; ]]]
#        [[[ return `url("${entity.attributes.entity_picture}")`; ]]]
#        [[[ return `url("${states['sensor.saver_trash_today'].attributes.entity_picture}",url("${states['sensor.saver_trash_tomorrow'].attributes.entity_picture}")`; ]]]
#    - animation: >
#        [[[ if (states['persistent_notification.trash_notification']) return 'blink 2s ease infinite';
#            return 'none';
#        ]]]
#    - background-repeat: no-repeat
    - animation: bgswap1 10s linear infinite
    - background-size: cover

Screenshots If applicable, add screenshots to help explain your problem.

Expected behavior A clear and concise description of what you expected to happen.

Desktop (please complete the following information):

• Browser [e.g. chrome, safari] Safari Mac 13.05, Chrome seems better at it
• Version [e.g. 22] 3.05

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.

additional questions:

1- can I still add the (now commented animation) for the blink on persistent_notification added to this new background animation?

2- I need to template these pictures to be the picture for today (entity) and tomorrow, (sensor.saver_trash_tomorrow). How can I add templates to these picture in the new extra_styles keyframe section, which for now is hard coded?

Ive tried to use the working code now commented in the card: background-image template, like this:

extra_styles: |
  @keyframes bgswap1 {
    0% {
      background-image: `url("${entity.attributes.entity_picture}")`;
    }
    25% {
      background-image: `url("${entity.attributes.entity_picture}")`;
    }
    50% {
      background-image: `url("${entity['sensor.saver_trash_tomorrow'].attributes.entity_picture}")`;
    }
    75% {
      background-image: `url("${entity['sensor.saver_trash_tomorrow'].attributes.entity_picture}")`;
    }
    100% {
      background-image: `url("${entity.attributes.entity_picture}")`;
    }
  }

but that doesnt work thanks for having a look

[RomRider]

To apply multiple animation you have to do like this: animation: blink 2s ease infinite, bgswap1 10s linear infinite

Regarding the other problem, I can’t reproduce chrome, FF, safari, ipad and android work as expected with this CSS.

For the templating:

extra_styles: |
  [[[
  return `@keyframes bgswap1 {
    0% {
      background-image: url("${entity.attributes.entity_picture}");
    }
    25% {
      background-image: url("${entity.attributes.entity_picture}");
    }
    50% {
      background-image: url("${entity['sensor.saver_trash_tomorrow'].attributes.entity_picture}");
    }
    75% {
      background-image: url("${entity['sensor.saver_trash_tomorrow'].attributes.entity_picture}");
    }
    100% {
      background-image: url("${entity.attributes.entity_picture}");
    }
  }`
  ]]]

[Mariusthvdb]

Yes, sorry, much obliged! Closed. Yet again successfully thanks to your magic card and support.