CODEWITHSUNDEEP
htmlcssanimation
Newstack
Newstack

Reputation: 53

Safari versus standard animation syntax

I'm trying to create a simple animation but getting confused between safari syntax and standard syntax.

Should I use @-webkit-keyframes or just @-keyframes?

So I created a div and created an animation based on it.

Css:

.about4 {background-color: red;-webkit-animation-name: 
aboutanimation; animation-name: aboutanimation; 
animation-duration: 4s;} @-keyframes animationname 
{from {background-color: red;} to {background-color: 
green;}}

Html: 

<div class="about4">About</div>

Css lint won't accept my syntax using @-keframes which w3 school says works. The animation doesn't work either way.

Upvotes: 2

Views: 41

Answers (2)

Sameh Shahin
Sameh Shahin

Reputation: 56

I think it's @keyframes not @-keyframes https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes

Upvotes: 1

Maria K.
Maria K.

Reputation: 229

I used just @keyframe + autoprefixer for different browser:

  @keyframes blinker {
    50% {
      opacity: 0;
    }
  }

More on auto-prefixer: https://www.npmjs.com/package/gulp-autoprefixer

Upvotes: 0

Related Questions