[Solved] Safari does not accept -webkit- keyframes and animations.

[sqnkov]

Hello guys, I am working on a website with a template done by someone else and while the template (smarty) was implemented on the live server, some css misleads happened.

So yesterday, the website was working properly only under Firefox. Today I added the -webkit- vendor prefix for the keyframes and animations, but yet again, Safari does not show the website as it is supposed to. Safari uses -webkit- prefix right?

Here is my website:

http://www.removalsmanandvan.org.uk/page-home.html

Look at it in Firefox/Chrome and Safari. How can I fix this problem?

A short example of my animations:

`.sliderheadingAnime {
animation: 1s ease 1s normal forwards 1 running sliderbuttonWide;
-webkit-animation: 1s ease 1s normal forwards 1 running sliderbuttonWide;

}

`

[sqnkov]

I managed to fix it.

For some reason, Safari does not read trough the shorthand method for describing the animation, for example:

animation: test 1s 2s 3 alternate backwards

It needs to be described more detailed with its separate properties listed:

.box {
 animation-name: bounce;
 animation-duration: 4s;
 animation-iteration-count: 10;
 animation-direction: alternate;
 animation-timing-function: ease-out;
 animation-fill-mode: forwards;
 animation-delay: 2s;
}

[Author]

Posts