Menu icon Foundation
Fade opacity decimals - animation-name

Hi,

I'm currently working with Foundation 6.0.5 and Motion UI. I have a little problem with getting a fade animation to work when using decimals as $from / $to values.

For sake of simplicity, let's say i want to fade an image to 50% opacity on mouse over:

// Fading from 100% to 0% works:
img {
    opacity: 1;	
	&:hover {
		@include mui-animation(fade($from: 1, $to: 0));
		animation-duration: 0.5s;
	}
}

// Fading from 100% to 50% does not work:
img {
    opacity: 1;	
	&:hover {
		@include mui-animation(fade($from: 1, $to: 0.5));
		animation-duration: 0.5s;
	}
}

         

The error lies in the 0.5 opacity value. The compiled CSS creates a param 'animation-name' based on the animation properties:

// Valid animation-name:
animation-name: fade-1-to-0;

// Invalid animation-name:
animation-name: fade-1-to-0.5;

         

The documentation states it is not allowed to use a dot in the anmiation-name:

https://developer.mozilla.org/nl/docs/Web/CSS/animation-name#Values

A string identifying the animation. This identifier is composed by a combination of case-insensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-).

The @function fade() interpolates the $from / $to parameters directly

// motion-ui/src/effects/_fade.scss


$keyframes: (
    name: 'fade-#{$from}-to-#{$to}',
    0: (opacity: $from),
    100: (opacity: $to),
  );
  

So i guess the $from / $to params should be sanitized first before the 'animation-name' is generated.

Did anyone else have the same problem?

All the best,
Tim

Motion UIfoundation 6bugdecimalsanimation-nameFade

Hi,

I'm currently working with Foundation 6.0.5 and Motion UI. I have a little problem with getting a fade animation to work when using decimals as $from / $to values.

For sake of simplicity, let's say i want to fade an image to 50% opacity on mouse over:

// Fading from 100% to 0% works:
img {
    opacity: 1;	
	&:hover {
		@include mui-animation(fade($from: 1, $to: 0));
		animation-duration: 0.5s;
	}
}

// Fading from 100% to 50% does not work:
img {
    opacity: 1;	
	&:hover {
		@include mui-animation(fade($from: 1, $to: 0.5));
		animation-duration: 0.5s;
	}
}

         

The error lies in the 0.5 opacity value. The compiled CSS creates a param 'animation-name' based on the animation properties:

// Valid animation-name:
animation-name: fade-1-to-0;

// Invalid animation-name:
animation-name: fade-1-to-0.5;

         

The documentation states it is not allowed to use a dot in the anmiation-name:

https://developer.mozilla.org/nl/docs/Web/CSS/animation-name#Values

A string identifying the animation. This identifier is composed by a combination of case-insensitive letters a to z, numbers 0 to 9, underscores (_), and/or dashes (-).

The @function fade() interpolates the $from / $to parameters directly

// motion-ui/src/effects/_fade.scss


$keyframes: (
    name: 'fade-#{$from}-to-#{$to}',
    0: (opacity: $from),
    100: (opacity: $to),
  );
  

So i guess the $from / $to params should be sanitized first before the 'animation-name' is generated.

Did anyone else have the same problem?

All the best,
Tim

Geoff Kimball over 3 years ago

We can update the library to print a number multiplied by 100, so there's no dot in the name. I'll let you know when an update is out!