openwebf/webf

Animation and background are not effective when combined with linear gradient

Opened this issue · 1 comments

wqRan commented

Affected version

0.16.0-beta.4

Flutter versions

3.16.0

No same issues found.

  • Yes, I search all issues but not found.

Steps to Reproduce

Animation 和 background 是 linear-gradient 时，渐变动画不生效

Code example

<style> .skeleton { height: 200px; width: 200px; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: infinite; animation-name: placeHolderShimmer; animation-timing-function: linear; background: #f6f7f8; background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%); background-size: 800px 104px; position: relative; } @Keyframes placeHolderShimmer{ 0% { background-position: -468px 0 } 100% { background-position: 468px 0 } } </style>

Expected results

渐变动画动起来

Actual results

渐变动画未生效

wqRan commented

代码如下

<!DOCTYPE html>
<html>
<head>
    <style>
  .skeleton {
    height: 200px;
    width: 200px;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
    background-size: 800px 104px;
    position: relative;
  }
  @keyframes placeHolderShimmer{
    0% {
      background-position: -468px 0
    }
    100% {
      background-position: 468px 0
    }
  }
    </style>
</head>
<body>
<div class="container">
  <div class="skeleton">

  </div>
</div>
</body>
</html>