![]() In addition, every cycle we’ll set our div’s color to a random value.MacOS, iOS, Linux, Microsoft Windows Every odd cycle of our example we’ll turn the div into circle by setting its border-radius style to half of the element size, and every even cycle we’ll turn it back into squire. In order to illustrate the use of transitionend event let’s create an infinite animation loop of a square div element. Transition animation chain and loop example Fortunately, the properties it provides are exactly the same as a properties provided by the 'transitionend' event, so we can use the same handler function. So, to ensure that our code will work on every platforms and browsers we must also use the webkit-specific event named ' webkitTransitionEnd'. For example, Safari on my tablets doesn’t. While the modern browsers already support the standard on desktop computers, on the mobile platforms some of them don’t. Till now everything is simple, but… haven’t you forgoten about the guerrilla groups? That’s the case. addEventListener( "transitionend", EventHandlerName, true) Refer the last draft of CSS Transition by W3C for the full list of animatable properties.Įxample of –moz-transition use looks like the following:Įlement. The transition-property may be an exact property name like "background-color", a comma separated list of property names like “width, height, color, background-color” or just "all". There are 5 supported functions: "ease", "linear", "ease-out", "ease-in-out" and "cubic-bezier"ĭefines how long to wait between the time a property is changed and the transition actually begins, in seconds or milliseconds Specifies a function to define how intermediate values for properties are computed. Specifies the duration over which transitions should occur in seconds or milliseconds Specifies the name or names of the CSS properties to which transitions should be applied The values of property, duration, timing function and delay are the placeholders of the following individual properties’ values: -moz-transition-property In the same way, -webkit-transition property is supported by Google Chrome and Safari browsers, and -o-transition is supported by Opera. Since this time the usual Cascading Style Sheet became looking like this one: In order to facilitate the use of these private extensions, one day they agreed on an intermediate standard called " known vendor prefixes": -moz for Mozilla (Gecko), -webkit for Apple Safari and Google Chrome, -ms for Microsoft Internet Explorer, -o for Opera, etc. ![]() In the meantime, the browser vendors kept developing of the new features in their own way and invent their own private standards, frustrating the web developer’s community more and more. With time, the specification was divided into several separate documents called "modules", some of which already became the standards while the others are still drafts. Today, after 15 years, this work is still not fully completed. Very soon, in May 1998, CSS standard was extended to level 2 and the team began working on the new version, CSS 3. The first official CSS specification was CSS level 1, published by W3C in December 1996. Cascading Style Sheets standard evolution When and where to use –moz-transition (-webkit-transition, -ms-transition, -o-transition, etc.) or just transition separately, together or instead? To find a correct answer to all these questions we need to examine this issue in details. “Will the code I just wrote work properly in all the most popular browsers or not?” Not only junior, but even an experienced developer not always can answer this question without a full-scale testing.ĬSS properties’ animation is the classic example of such a case. ![]() In particular, it’s a big uncertainty among the web developers about the standards they should or shouldn’t use in the different situations. Even some guerrilla groups are still skulking in the trees of Internet, we’ll talk about them a little bit later.įinally this war made Internet really better and clear, but it also left a number of deplorable consequences that we continue feeling today. The Second Browser War of mid to late 2000s was long and bloody, but now it’s over. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |