Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The PostCSS plugin Autoprefixer prevents the proper application of 'transform' within the keyframes of CSS animations #571

Open
1 task done
ChourZ opened this issue Mar 11, 2024 · 1 comment
Open
1 task done

The PostCSS plugin Autoprefixer prevents the proper application of 'transform' within the keyframes of CSS animations #571

ChourZ opened this issue Mar 11, 2024 · 1 comment
Labels
bug Something isn't working

Comments

@ChourZ
Copy link

ChourZ commented Mar 11, 2024

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

.

Code example

Vue file

a

webpack.base.conf.js

module: {
  rules: [
    {
      test: /\.css$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins: () => [
              require('autoprefixer')({
                browsers: require('./package.json').browserslist
              })
            ]
          }
        }
      ]
    }
  ]
}

autoprefixer version: 7.2.6

Expected results

expected.result.mov

Actual results

The animation effect of loading is not taking effect.

actual.results.mov
@ChourZ ChourZ added the bug Something isn't working label Mar 11, 2024
@ChourZ
Copy link
Author

ChourZ commented Mar 11, 2024

This bug is because of the prefix of the css property, such as -webkit-.
For example, as shown below, '-webkit-animation' is not working in the 'animation-left' but 'animation' is working in the 'animation-right'.

<!DOCTYPE html>
<html>
<head>
  <title>loading</title>
</head>
<body>
  <div style="display: flex; justify-content: center; width: 100vw;">
    <div class="animation-left"></div>
    <div class="animation-right"></div>
  </div>
  <style>
    .animation-left {
       width: 8px;
       height: 36px;
       background: rgb(255,122,69); 
       margin-right: 12px;
       border-radius: 20px;
       -webkit-animation: fadein 1.04s ease infinite;
    }
   
     .animation-right {
       width: 8px;
       height: 36px;
       background: rgb(49,183,126); 
       margin-right: 12px;
       border-radius: 20px;
       animation: fadeout 1.04s ease infinite;
     }
   
     @keyframes fadein {
       0% {
         opacity: 1;
         transform: scale(1) rotate(30deg);
       }
       40% {
         opacity: 0.5;
         transform: scale(0.7) rotate(30deg);
       }
       90% {
         opacity: 1;
         transform: scale(1) rotate(30deg);
       }
       100% {
         opacity: 1;
         transform: scale(1) rotate(30deg);
       }
     }
   
     @keyframes fadeout {
       0% {
         opacity: 1;
         transform: scale(1) rotate(30deg);
       }
       10% {
         opacity: 1;
         transform: scale(1) rotate(30deg);
       }
       60% {
         opacity: 0.5;
         transform: scale(0.7) rotate(30deg);
       }
       100% {
         opacity: 1;
         transform: scale(1) rotate(30deg);
       }
     }
   </style>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@ChourZ