CODEWITHSUNDEEP
cssanimationsafarisass
Jeff
Jeff

Reputation: 543

CSS animation not working in Safari but fine in Chrome and Firefox

I'm using SASS and here is the code I'm using

@mixin keyframes($animation-name) {
  @-webkit-keyframes $animation-name {
    @content;
  }
  @-moz-keyframes $animation-name {
    @content;
  }  
  @-ms-keyframes $animation-name {
    @content;
  }
  @-o-keyframes $animation-name {
    @content;
  }  
  @keyframes $animation-name {
    @content;
  }
}

@mixin transition() {
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

@mixin animation($str) {
  -webkit-animation: #{$str};
  -moz-animation: #{$str};
  -ms-animation: #{$str};
  -o-animation: #{$str};
  animation: #{$str};      
}

@include keyframes(fadein) {
  from  { opacity: 0; }
  to    { opacity: 1; }
}

.fadein {
    @include transition;
    @include animation('0.5s ease-in-out .7s normal forwards 1 running fadein');
}

This works fine in Firefox and Chrome but it doesn't execute in Safari. I have tried with percentage values inside the keyframe like 

0% {opacity: 0;}
100% {opacity: 1;}

but this didn't fix it either.

In the console in Safari appears an exclamation mark in the CSS animation line, here is a screenshot of it

enter image description here

What could the issue be?

Upvotes: 0

Views: 763

Answers (1)

Jeff
Jeff

Reputation: 543

Sorry my bad for not having checked the animation properties syntax before asking here. I thought I had it right..! It should be

@include animation('fadein .5s ease-in-out .7s forwards');

Upvotes: 1

Related Questions