<easing-function> - CSS: Cascading Style Sheets
they correlate a time ratio to an output ratio, both expressed as <number>s. for these values, 0.0 represents the initial state, and 1.0 represents the final state. depending on the specific function used, the calculated output can sometimes grow to be greater than 1.0 or smaller than 0.0 during the course of an animation. ...
...or some properties, such as left or right, this creates a kind of "bouncing" effect. however, certain properties will restrict the output if it goes outside an allowable range. for example, a color component greater than 255 or smaller than 0 will be clipped to the closest allowed value (255 and 0, respectively). some cubic-bezier() curves exhibit this property. syntax there are three types of easing function: linear, cubic bézier curves, and staircase functions. the value of an <easing-function> type describes the easing function using one of those three types. easing functions css supports three kinds of easing functions: linear, the subset of the cubic bézier curves that are functions, and staircase functions. the most useful of these functions are given a keyword that allows them to b...
...nd staircase functions. the value of an <easing-function> type describes the easing function using one of those three types. easing functions css supports three kinds of easing functions: linear, the subset of the cubic bézier curves that are functions, and staircase functions. the most useful of these functions are given a keyword that allows them to be easily referenced. the linear class of easing functions linear the animation moves from beginning to end at a constant rate. this keyword represents the easing function cubic-bezier(0.0, 0.0, 1.0, 1.0). the cubic-bezier() class of easing functions the cubic-bezier() functional notation defines a cubic bézier curve. as these curves are continuous, they are often used to smooth down the start and end of the animation and are therefore...
...And 13 more matches

EffectTiming.easing - Web APIs
the effecttiming dictionary's easing property in the web animations api specifies the timing function used to scale the time to produce easing effects, where easing is the rate of the animation's change over time. element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including easing. the value of easing corresponds directly to animationeffecttimingreadonly.easing in timing objects returned by animationeffectreadonly, keyframeeffectreadonly, and keyframeeffect. syntax var timingproperties = { easing: single-transition-timing-function } timingproperties.easing = single-transition-timing-function value a string defining the timing function to use for easing transitions during the animation process. accepts several pre-defi...
...t be a positive integer (greater than 0). the second parameter, which is optional, specifies the point at which the change of values occur within the interval. if the second parameter is omitted, it is given the value end. step-start equivalent to steps(1, start) step-end equivalent to steps(1, end). ...
... working draft editor's draft. ...
... working draft editor's draft. ...

The Business Benefits of Web Standards - Archive of obsolete content
rying about each engine and attempting to artificially manipulate the results, web standards pages index and rank properly (where they deserve to) across all search engines. in the same way that standards hugely reduce the concern we need to have for browser differences, they also reduce the differences between the way search engines rank pages. there should be little need to plunge into the increasing costs and uncertain quality and integrity of proprietary pay per click campaigns. increase website traffic maintain contact with your user on multiple platforms standards-based code and cross-platform go hand in hand. while some browsers have quirks that cause different behavior by platform, mozilla-based browsers are designed to behave identically on all supported platforms (mac, linux, unix,...
...integrity of proprietary pay per click campaigns. increase website traffic maintain contact with your user on multiple platforms standards-based code and cross-platform go hand in hand. while some browsers have quirks that cause different behavior by platform, mozilla-based browsers are designed to behave identically on all supported platforms (mac, linux, unix, windows...) web content is increasingly being accessed by a growing number of user agents other than browsers, or by browsers on different platforms - for example mobile telephones. feed content such as rss and atom simply will not work without being implemented by following the requisite standard. assumptions about the user and their platform based on erroneous thinking about the anticipated user community are inevitably always wro...
...y will not work without being implemented by following the requisite standard. assumptions about the user and their platform based on erroneous thinking about the anticipated user community are inevitably always wrong. it does not follow for example that successful business users have wide monitors. the opposite may be true. power users and business travellers are downsizing their notebooks. increasingly one person may need to acccess the same site using different platforms at home, in the office and when travelling. they expect a consistent experience. web standards gives us tools, and methodologies for dealing with this paradox and making the wider contribution of making our content universally accessible to people in different social, medical and economic circumstances. happier staff good...
...And 4 more matches

Index - Web APIs
y of the audiocontext interface returns a double that represents the number of seconds of processing latency incurred by the audiocontext passing the audio from the audiodestinationnode to the audio subsystem. 125 audiocontext.close() api, audiocontext, media, method, reference, web audio api, close the close() method of the audiocontext interface closes the audio context, releasing any system audio resources that it uses. 126 audiocontext.createjavascriptnode() api, audio, method, obsolete, reference, web, createjavascriptnode the following script illustrates the use of createjavascriptnode(): 127 audiocontext.createmediaelementsource() api, audiocontext, method, reference, référence(2), web audio api, createmediaelementsource for...
...seaudiocontext.createwaveshaper() api, audiocontext, baseaudiocontext, method, reference, web audio api, createwaveshaper a waveshapernode. 246 baseaudiocontext.currenttime api, audiocontext, baseaudiocontext, property, reference, web audio api, currenttime the currenttime read-only property of the baseaudiocontext interface returns a double representing an ever-increasing hardware timestamp in seconds that can be used for scheduling audio playback, visualizing timelines, etc. it starts at 0. 247 baseaudiocontext.decodeaudiodata() api, audio, audiocontext, baseaudiocontext, method, reference, web audio api, decodeaudiodata this is the preferred method of creating an audio source for web audio api from an audio track. this method only works on c...
... deprecationreportbody api, deprecationreportbody, experimental, interface, reference, reporting api the deprecationreportbody interface of the reporting api represents the body of a deprecation report (the return value of its report.body property). 826 detecting device orientation api, device orientation, intermediate, mobile, motion, orientation, reference increasingly, web-enabled devices are capable of determining their orientation; that is, they can report data indicating changes to their orientation with relation to the pull of gravity. in particular, hand-held devices such as mobile phones can use this information to automatically rotate the display to remain upright, presenting a wide-screen view of the web content when the device is rotated so that its...
...And 4 more matches

Intersection Observer API - Web APIs
350px; height: 350px; margin-top: 10px; border: 4px solid rgb(20, 20, 120); text-align: center; padding: 20px; } javascript finally, let's take a look at the javascript code that uses the intersection observer api to make things happen. setting up first, we need to prepare some variables and install the observer. const numsteps = 20.0; let boxelement; let prevratio = 0.0; let increasingcolor = "rgba(40, 40, 190, ratio)"; let decreasingcolor = "rgba(190, 40, 40, ratio)"; // set things up window.addeventlistener("load", (event) => { boxelement = document.queryselector("#box"); createobserver(); }, false); the constants and variables we set up here are: numsteps a constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0. pre...
...erver(); }, false); the constants and variables we set up here are: numsteps a constant which indicates how many thresholds we want to have between a visibility ratio of 0.0 and 1.0. prevratio this variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible. ...
...es how many thresholds we want to have between a visibility ratio of 0.0 and 1.0. prevratio this variable will be used to record what the visibility ratio was the last time a threshold was crossed; this will let us figure out whether the target element is becoming more or less visible. increasingcolor a string defining a color we'll apply to the target element when the visibility ratio is increasing. the word "ratio" in this string will be replaced with the target's current visibility ratio, so that the element not only changes color but also becomes increasingly opaque as it becomes less obscured. decreasingcolor similarly, this is a string defining a color we'll apply when the visibility ratio is decreasing. we call window.addeventlistener() to start listening for the load event; once ...
...And 3 more matches

KeyframeEffect.setKeyframes() - Web APIs
{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 } ], 2000); note: offset values, if provided, must be between 0.0 and 1.0 (inclusive) and arranged in ascending order. it is not necessary to specify an offset for every keyframe. keyframes without a specified offset will be evenly spaced between adjacent keyframes. ...
... { opacity: 0 } ], 2000); note: offset values, if provided, must be between 0.0 and 1.0 (inclusive) and arranged in ascending order. it is not necessary to specify an offset for every keyframe. keyframes without a specified offset will be evenly spaced between adjacent keyframes. the easing to apply between keyframes can be specified by providing an easing value as illustrated below. ...
... offset values, if provided, must be between 0.0 and 1.0 (inclusive) and arranged in ascending order. it is not necessary to specify an offset for every keyframe. keyframes without a specified offset will be evenly spaced between adjacent keyframes. the easing to apply between keyframes can be specified by providing an easing value as illustrated below. element.animate([ { opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000); in this example, the specified easing only applies from the keyframe where it is specified until the next keyframe. any easing value specified on the options argument, however, applies across a single iteration of the animation — for the entire duration. an ...
...And 3 more matches

Keyframe Formats - Web APIs
{ opacity: 1 }, { opacity: 0.1, offset: 0.7 }, { opacity: 0 } ], 2000); note: offset values, if provided, must be between 0.0 and 1.0 (inclusive) and arranged in ascending order. it is not necessary to specify an offset for every keyframe. keyframes without a specified offset will be evenly spaced between adjacent keyframes. ...
... { opacity: 0 } ], 2000); note: offset values, if provided, must be between 0.0 and 1.0 (inclusive) and arranged in ascending order. it is not necessary to specify an offset for every keyframe. keyframes without a specified offset will be evenly spaced between adjacent keyframes. the easing to apply between keyframes can be specified by providing an easing value as illustrated below. ...
... offset values, if provided, must be between 0.0 and 1.0 (inclusive) and arranged in ascending order. it is not necessary to specify an offset for every keyframe. keyframes without a specified offset will be evenly spaced between adjacent keyframes. the easing to apply between keyframes can be specified by providing an easing value as illustrated below. element.animate([ { opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000); in this example, the specified easing only applies from the keyframe where it is specified until the next keyframe. any easing value specified on the options argument, however, applies across a single iteration of the animation — for the entire duration. an ...
...And 3 more matches

Applying styles and colors - Web APIs
draw a grid of rectangles, each in a different color. the resulting image should look something like the screenshot. there is nothing too spectacular happening here. we use the two variables i and j to generate a unique rgb color for each square, and only modify the red and green values. the blue channel has a fixed value. by modifying the channels, you can generate all kinds of palettes. by increasing the steps, you can achieve something that looks like the color palettes photoshop uses. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillstyle = 'rgb(' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ', 0)'; ctx.fillrect(j * 25, i * 25, ...
... the valid range is again between 0.0 (fully transparent) and 1.0 (fully opaque). a globalalpha example in this example, we'll draw a background of four different colored squares. on top of these, we'll draw a set of semi-transparent circles. the globalalpha property is set at 0.2 which will be used for all shapes from that point on. every step in the for loop draws a set of circles with an increasing radius. the final result is a radial gradient. by overlaying ever more circles on top of each other, we effectively reduce the transparency of the circles that have already been drawn. by increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image. function draw() { var ctx = document.getelementbyid('canvas').getcontext('...
...using rgba() gives you a little more control and flexibility because we can set the fill and stroke style individually. function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); // draw background ctx.fillstyle = 'rgb(255, 221, 0)'; ctx.fillrect(0, 0, 150, 37.5); ctx.fillstyle = 'rgb(102, 204, 0)'; ctx.fillrect(0, 37.5, 150, 37.5); ctx.fillstyle = 'r...
...And 2 more matches

Building up a basic demo with A-Frame - Game development
on of animation. rotation there's a special <a-animation> entity that can help us animate elements. add the <a-animation> element seen below to the <a-box> element as a child, as shown: <a-box color="#0095dd" rotation="20 40 0" position="0 1 0"> <a-animation attribute="rotation" from="20 0 0" to="20 360 0" direction="alternate" dur="4000" repeat="indefinite" easing="ease"> </a-animation> </a-box> as with any other entities, you can define key properties for the animation. we'll be animating the rotation attribute from 20 0 0 to 20 360 0, so it will do a full spin. the animation direction is set to alternate so the animation will be played forward, and then back. the duration is set to 4 seconds, and it will be repeated indefinitely. the animation uses e...
... </a-animation> </a-box> as with any other entities, you can define key properties for the animation. we'll be animating the rotation attribute from 20 0 0 to 20 360 0, so it will do a full spin. the animation direction is set to alternate so the animation will be played forward, and then back. the duration is set to 4 seconds, and it will be repeated indefinitely. the animation uses ease for easing, with tween.js being implemented internally. scaling we can also add animation to entities with custom geometry like the torus, in much the same way. add the following <a-animation> element to your torus: <a-entity geometry=" primitive: torus; radius: 1; radiustubular: 0.1; segmentstubular: 12;" material=" color: #eaeff2; roughness: 0.1; metalness: 0.5;" rotat...
...by setting the direction to alternate the scale will be animated to 0.5, and then animated back to 1 during 2 seconds. again, the animati...
...by setting the direction to alternate the scale will be animated to 0.5, and then animated back to 1 during 2 seconds. again, the animation is being repeated indefinitely. ...

Appendix: What you should know about open-source software licenses - Archive of obsolete content
ense as the existing work is a straightforward option. if you are not going to be distributing the modified software at all, and will only be using it within your own organization, you need not release it. for example, if you are using an modified version of linux as the operating system for a web server, it’s fine if you don’t release it. picking a license for original works if you are releasing source code you have developed yourself, you need to pick a license. but what kind of license? yukihiro matsumoto, the developer behind the ruby scripting language, published a “free software license diagnostic” in his personal blog. it asks a series of questions, and your responses help you pick the right license. in brief, it goes like this: best not to even try: creating a new license f...
...e as that project. none of the above: choose the modified bsd license. the title hints at matsumoto’s diagnostic approach, since it mentions “free software.” this is slightly different from open source. (matsumoto updated his free software license diagnostic for a special open-source section in the january 2007 edition of softbank’s open source magazine.) if a company is considering releasing its own software as open source, it should consider dual-licensing or the cpl. applying a license to original works if you want to release your own code as open-source, here’s what you do next. insert the license declaration in the top of every file in your source code; include the full text of the license in your source-code archive; place the source code on a website or otherwise make ...
...xibility when selecting and applying terms; terms of use stated in easy-to-understand language; licensing conditions conform with current copyright laws; also has an rdf schema for attaching metadata. it is particularly convenient in the way that it allows creators to decide whether to permit commercial uses or not, whether to enforce copyleft or not, etc. this is easy to use when you are releasing new documents. the future of gpl despite being buffeted by circumstances, open source is becoming more and more solidly established. but the computer ecosystem is changing in fundamental ways, with software patents, drm, internationally applied licenses, and other new challenges coming into focus. to respond to these challenges, the free software foundation has revised the gpl to version 3. dr...

Index - Archive of obsolete content
no summary! 753 flexgroup "flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first. when those elements have reached their maximum sizes, the elements with the next higher flexgroup are flexed. this process continues until there are no more elements remaining. the same process occurs when decreasing the size, except in the other direction. 754 accelerated xul, xul attribute, xul reference no summary! 755 acceltext xul attributes, xul reference no summary! 756 accessible xul attributes, xul reference no summary! 757 accesskey reference, xul, xul attributes, xul reference, accesskey no summary! 758 a...
...eferences which will ensure that the information you need to know is displayed on them. 1962 deploying xulrunner deployment, guide, tutorials, xul, xulrunner current xulrunner is a stable developer preview release. this means that while the release is immature in some areas such as embedding, application deployment, and os integration, it can be used by developers that are releasing standalone xul applications. this document explains how deployment should be managed for self contained portable applications built on xulrunner. 1963 dialogs in xulrunner xul, xulrunner the last article in this series covered some simple xul for creating windows, menus, and toolbars. this time i'll look at dialogs, including both custom dialogs and standard operating system ...
...t the possibilities outlined below will inspire you to learn more where you need to. 2246 xforms custom controls examples xforms no summary! 2247 xforms styling xforms no summary! 2248 background-size should not the "browser compatibility" table also list google chrome and konqueror? chome is not mentioned at all, but is becoming increasingly popular. konqueror is listed below the table, which seems inconsistent. znerd 04 august 2009 2249 foreach ok, in the end i didn't remove the old code as it isn't hosted anywhere (i thought the github reference contained the code) but inserted a faster implementation above while retaining the rest of the document. 3239 beginner tutorials this page incl...

Animations and tweens - Game development
al sprites sequentially, tweens smoothly animate properties of an object in the gameworld, such as width or opacity. let's add a tween to our game to make the bricks smoothly disappear when they are hit by the ball. ...
...ar. to the end, we use the add.tween() method, specifying brick.scale as the argument as this is what we want to tween. the to() method defines the state of the object at the end of the tween. ...
...lliseconds and the type of easing to use for the tween. we will also add the optional oncomplete event handler, which defines a function to be executed when the tween finishes. the last thing do to is to start the tween right away using start(). that's the expanded version of the tween definition, but we can also use the shorthand syntax: game.add.tween(brick.scale).to({x:2,y:2}, 500, phaser.easing.elastic.out, true, 100); this tween will double the brick's scale in half a second using elastic easing, will start automatically, and have a delay of 100 miliseconds. compare your code you can check the finished code for this lesson in the live demo below, and play with it to understand better how it works: next steps animations and tweens look very nice, but we can add even more to our ...

Work with animations - Firefox Developer Tools
own as a horizontal bar laid across the timeline. the bar is: blue if a transition was used to animate a property orange if a @keyframes animation was used green if the web animations api was used the bar contains a lightning bolt icon if the property was animated using the compositor thread (see more about the cost of animating different css properties). the bar is shaped to reflect the easing effect used for the animation. in the example above you can see that the first bar is concave, representing ease-in, and the second is convex, representing ease-out. if the animation used css transitions, there is one bar for each property transitioned, and it is labeled with the name of the property being transitioned. if the animation used css @keyframes, there is one bar for each animation, l...
...ad a delay, this is shown as a cross-hatched portion of the bar. delay and enddelay are both represented. if you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition, including: the type of animation: css transition, css animation, or web animations api the duration of the animation the animation's start and end delay the animation's easing (or timing function). the animation's fill the playback rate of the animation information about the animated element to the left of each bar is a selector for the element that the animation applies to. if you hover over this selector, the element is highlighted in the page. click the selector to select the element in the inspector. to the left of the selector is a "target" icon (). clicki...
...ation involved two elements, span#note and img#icon. hovering over these selectors, we can see that those elements are, respectively, the browser name "firefox developer edition" and the browser icon. the img#icon animation: animated the filter and transform properties, to scale the icon and color it lasted 750ms, had an enddelay of 100ms used the compositor thread was given an easing value of ease-in: you can see this by the concave shape of the green bar. the span#note animation: animated the width and opacity properties, to make the name gradually appear lasted 500ms, and had a delay of 150ms was given an easing value of ease-out: you can see this by the convex shape of the green bar. animation playback at the top of the animation inspector: t...

IDBCursor - Web APIs
confused with idbcursorwithvalue which is just an idbcursor interface with an additional value property. the idbcursor interface of the indexeddb api represents a cursor for traversing or iterating over multiple records in a database. the cursor has a source that indicates which index or object store it is iterating over. it has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. the cursor enables an application to asynchronously process all the records in the cursor's range. you can have an unlimited number of cursors at the same time. you always get the same idbcursor object representing a given cursor. operations are performed on the underlying index or object store. note: this feature is available in web workers. properti...
...ition of the cursor in the object store. this can be used to update specific records. constants these constants are no longer available — they were removed in gecko 25. you should use the string constants directly instead. (bug 891944) next : "next" : the cursor shows all records, including duplicates. it starts at the lower bound of the key range and moves upwards (monotonically increasing in the order of keys). nextunique : "nextunique" : the cursor shows all records, excluding duplicates. if multiple records exist with the same key, only the first one iterated is retrieved. it starts at the lower bound of the key range and moves upwards. prev : "prev" : the cursor shows all records, including duplicates. it starts at the upper bound of the key range and moves downwards (monoton...
...er of keys). nextunique : "nextunique" : the cursor shows all records, excluding duplicates. if multiple records exist with the same key, only the first one iterated is retrieved. it starts at the lower bound of the key range and moves upwards. prev : "prev" : the cursor shows all records, including duplicates. it starts at the upper bound of the key range and moves downwards (monotonically decreasing in the order of keys). prevunique : "prevunique" : the cursor shows all records, excluding duplicates. if multiple records exist with the same key, only the first one iterated is retrieved. it starts at the upper bound of the key range and moves downwards. examples in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records i...

WebSocket.send() - Web APIs
if the data can't be sent (for example, because it needs to be buffered but the buffer is full), the socket is closed automatically. syntax websocket.send("hello server!"); parameters data the data to send to the server. it may be one of the following types: usvstring a text string. the string is added to the buffer in utf-8 format, and the value of bufferedamount is increased by the number of bytes required to represent the utf-8 string. ...
...he data to send to the server. it may be one of the following types: usvstring a text string. the string is added to the buffer in utf-8 format, and the value of bufferedamount is increased by the number of bytes required to represent the utf-8 string. ...
... exceptions thrown invalid_state_err the connection is not currently open. syntax_err the data is a string that has unpaired surrogates. ...