Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Keyframes transformation seems not to be working

See original GitHub issue

Hello,

I tried to write a beating-heart component. Here is the code I have in the style.css file

@keyframes beating-heart-animation {
  0% { transform: scale(1) }
  10% { transform: scale(1.2) }
  30% { transform: scale(1) }
  40% { transform: scale(1.02) }
  60% { transform: scale(1.13) }
  75% { transform: scale(1) }
  100% { transform: scale(1) }
}

& {
  color: #e0001b;
  display: inline-block;
  font-size: 2em;
  position: relative;
  top: 0.2em;
  text-align: center;
  animation-name: beating-heart-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

Here is the code that is being generated (and doesn’t animate the element in the end)

@keyframes beating-heart-animation {
  .beating-heart-eca72739 0% { transform: scale(1) }
  .beating-heart-eca72739 10% { transform: scale(1.2) }
  .beating-heart-eca72739 30% { transform: scale(1) }
  .beating-heart-eca72739 40% { transform: scale(1.02) }
  .beating-heart-eca72739 60% { transform: scale(1.13) }
  .beating-heart-eca72739 75% { transform: scale(1) }
  .beating-heart-eca72739 100% { transform: scale(1) }
}

.beating-heart-eca72739 {
  color: #e0001b;
  display: inline-block;
  font-size: 2em;
  position: relative;
  top: 0.2em;
  text-align: center;
  animation-name: beating-heart-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

I would expect the generated css to look like this instead

@keyframes beating-heart-eca72739-beating-heart-animation {
  0% { transform: scale(1) }
  10% { transform: scale(1.2) }
  30% { transform: scale(1) }
  40% { transform: scale(1.02) }
  60% { transform: scale(1.13) }
  75% { transform: scale(1) }
  100% { transform: scale(1) }
}

.beating-heart-eca72739 {
  color: #e0001b;
  display: inline-block;
  font-size: 2em;
  position: relative;
  top: 0.2em;
  text-align: center;
  animation-name: beating-heart-eca72739-beating-heart-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

using version 0.1.9 of this addon and version ~2.8.0 of Ember.

Issue Analytics

State:
Created 7 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

Flobycommented, Oct 19, 2016

That’s some badass OSS’ing! Thank you @webark and @topaxi!

0reactions

topaxicommented, Oct 19, 2016

Fixed and released in postcss-selector-namespace as 1.2.5. Reinstalling the addon should do the trick 👍

I’m not namespacing the animation name yet, this could be discussed, I was scared for backwards compatibility issues.

Top Results From Across the Web

CSS Animations Not Working? Try These Fixes - HubSpot Blog

Learn how to fix common CSS animation error and get your animations looking how you want them.

Keyframes not working the way it's intended - HTML & CSS

It does move back to its default state which is at a transform of 200% as seen in the first rule. As soon...

keyframe transform translate not working on safari and edge

My problem is not that items are moved to different places with different browsers but rather that translate does not seem to work...

Solved: Can't Edit Keyframes in After Effects - YouTube

This tutorial teaches you the simple steps to fixing After Effects when you can't edit keyframes.Basically, you probably haven't drilled ...

Keyframes for Scale not working - Adobe Support Community

I've solved for not working scale keyframes. I'm on Premiere Pro 2020. 1. Go to File>Projects Settings>General. 2. Click on "Mercury Playback Engine...