Mixin facts 5/9 step 3

[freida72]

<PLEASE USE THE FOLLOWING TEMPLATE TO HELP YOU CREATE A GREAT POST!>

<Below this line, add a link to the EXACT exercise that you are stuck at.>
https://www.codecademy.com/courses/learn-sass/lessons/mixins-and-parent-selector/exercises/multiple-arguments?action=lesson_resume

getting the following error

Did you include the transition mixin with a total of 0.4s in main.scss?

code below

```

@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
background: repeating-linear-gradient(
$direction,
$stripe-background,
$stripe-background ($width-percent - 1),
$stripe-color 1%,
$stripe-background $width-percent
);
}

@mixin transform($transformation) {
transform: $transformation;
-webkit-transform: $transformation;
-moz-transform: $transformation;
-ms-transform: $transformation;
-o-transform: $transformation;
}

@mixin photo-content {
object-fit: cover;
}

@mixin backface-visibility($visibility:hidden){
backface-visibility:$visibility;
-webkit-backface-visibility: $visibility;
-moz-backface-visibility: $visibility;
-ms-backface-visibility: $visibility;
-o-backface-visibility: $visibility;
}

@mixin transform-style($style){
transform-style:$style;
-moz-transform-style:$style;
-o-transform-style:$style;
-ms-transform-style:$style;
-webkit-transform-style:$style;
}

@mixin transition($time){
transition: $time;
-webkit-transition: $time;
-moz-transition: $time;
-o-transition: $time;
}

//Add your own mixins here

.notecard {
width: 300px;
height: 180px;
border: 1px solid black;
display: inline-block;
margin: 20px;
font-family: Roboto, sans-serif;
box-shadow: 1px 1px 2px 2px rgba(0,0,0,.2);
&:hover{
@include transform(rotatey(-180deg));
}
@include transform-style(preserve-3d);
@include transition(0.4s);

.front, .back {
width: 100%;
height: 100%;
position: absolute;
@include backface-visibility;
}

.front {
z-index: 3;
font-size: 20px;

.word {
  display: block;
  text-align: center;
  position: relative;
  top: 40%;
}    

}

.back {
z-index: 1;
word-wrap: break-word;
line-height: 1.6;
@include transform(rotatey(-180deg));

.definition {
  width: 100%;
  height: 100%;
        
  .photo {
    width: 60%;
    margin: 0px auto;
      
  }
}

}
}

<do not remove the three backticks above>

[dayfiri]

If you’re using Mozilla firefox and have problem on this assignment just change browser on this one and it will work.
I’m using firefox and it didn’t work from ne on this exercise changed to Opera for this one and all went well.

[coreninja92220]

Cheers dayfiri - I’ve spent more time now trying to get past this ■■■■■■ bug than I have on the course in total so far. Out of everything I’d seen as a workaround only your suggestion worked, swapping to Chrome did the trick.

It was first reported months ago, someone really should get it fixed.

[dayfiri]

I’m glad we found the fix
Hope others will see it.