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.

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

The 'purple box' is animated with CSS animation #543

Closed
meuslaur opened this issue May 2, 2020 · 0 comments
Closed

The 'purple box' is animated with CSS animation #543

meuslaur opened this issue May 2, 2020 · 0 comments

Comments

@meuslaur
Copy link

@meuslaur meuslaur commented May 2, 2020

Please read the CONTRIBUTING guide before submitting an issue.

Description

The 'purple box' causes display bugs, during CSS animation.
if I use a class on the div, the 'purple box' appears, but does not come alive

Expected Behavior

no animation of the 'purple box'

Actual Behavior

the 'purple box' comes alive with CSS animation

Steps to Reproduce

  1. [First Step] HTML
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>Test</title>
</head>
<body>
  <label for="play">Lancer</label>
  <input type="checkbox" id="play" checked/>
  <div></div>
</body>
</html>]
  1. [Second Step] CSS
div {
  background-color: #000;
  width: 100px;
  height: 100px;
  margin: 20px;
  animation-name: spin;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-play-state: paused;
}

:checked ~ div {
  animation-play-state: running;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

image

Versions

  • Browser: Edge@last(beta), Chrome@last, Firefox@last, FirefoxDevelopper@last
  • OS: Windows 10, Linux
@meuslaur meuslaur closed this May 2, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
1 participant