Webkit - Browser Rendering Engine

When looking at an animated slideshow page the W3C Schools examples introduced the -webkit amimation and keyframes syntax. Again, I admit that I don't really understand what is going on here! Doing some research into this is appears (to me at least) that this is not well explained.

But, this reference to "webkit" may be a different thing altogether and just be something historical in the develoment of browsers. In any case it shows how WikiP cannot be relied on as the definative reference.

What WikiP says:

" WebKit is a browser engine developed by Apple and primarily used in its Safari web browser, as well as all the iOS web browsers. WebKit is also used by the BlackBerry Browser, the Tizen mobile operating systems, and a browser included with the Amazon Kindle e-book reader. WebKit's C++ application programming interface (API) provides a set of classes to display Web content in windows, and implements browser features such as following links when clicked by the user, managing a back-forward list, and managing a history of pages recently visited. "

The information on the Wikipedia page

Copied in December 2019 it doesn't seem to be up-to-date. The fact that Blackberry is mentioned and Javascript/webkit is used in examples on current W3C pages seems to indicate that things have moved on. In fact, I am not sure if we are talking about the same thing!

The WikiP page does go on to describe the on-going development and Javascript. This then leads to some of the work on animations and more complex rendrings. This is what I was intrested in.

Animation

This is really the reason for this page. So I have made a page just for Animation

What they are

See the W3C page

The @Keyframes Rule

The W3C page says:

" When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times. "

I am using a @Keyframes Rule to animate a fade on a slideshow of images.

Top

The -webkit- Prefix

As in:

-webkit-animation-duration: 1.5s; 
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

The current way of thinking is that the prefix is no longer necessary. This could be due to the fact that modern browsers now follow the current W3C (to mention lust one) standards.

Animation and the iPad

I have created animations on this website both using the prefix and without. Both seem to work on the browsers that I currently use. However, my slideshows on some of my pages, noteable the home page, don't seem to render the fade animation after the first cycle when view on an iPad. I am confused by this as the fade animation works on an iPhone and on a Windows computer.

I reduced the "cycle" time on my "slides page" to 1 second. This is shorter than the animation-duration time. This slideshow maintains a fade indefinitely on the iPad.

On further observation it appears that the animation