CODEWITHSUNDEEP
htmlcssanimation
Maharkus
Maharkus

Reputation: 2898

Does CSS have any predefined animations?

So I just saw this question where op defined an animation called flash. It causes weird behaviour in all browsers I tested (Chrome and Firefox - both recently updated):

The animation values I enter get ignored and instead the block fades in and out with a yellow color - kind of like a flash.

Here's a screenshot of what I'm seeing:

enter image description here

I couldn't find anything about predefined CSS animations and I can't seem to override them either.

Here's the code snippet:

.block {
  height: 100px;
  width: 100px;
  background-color: red;
}

.flash {
  animation: flash 2s infinite;
}

@keyframes flash {
  0% {
    background-color: blue;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}

.notFlash {
  animation: notFlash 2s infinite;
}

@keyframes notFlash {
  0% {
    background-color: blue;
  }
  50% {
    background-color: red;
  }
  100% {
    background-color: blue;
  }
}
<div class='block flash'>Flash Animation Name</div>
<div class='block notFlash'>A Different Animation Name</div>

What is happening here? Does such a thing as preset animations exist?

I couldn't find anything googling.

Upvotes: 2

Views: 113

Answers (1)

James Coyle
James Coyle

Reputation: 10398

StackOverflow uses an animation with that name in its own styles. As the StackSnipppet is not sandboxed, this style overrides the one you define in the snippet.

The following snippet shows the animation in use in the console output to indicate a new item has been logged to the console:

let i = 0

setInterval(() => {
  console.log(++i)
}, 1000)

You can see that this is not the case if you try a different snippet tool or run your code locally.

See the post on meta for more information (linked by esqew in the comments).

Upvotes: 1

Related Questions