<easing-function> - CSS: Cascading Style Sheets
the <easing-function> css data type denotes a mathematical function that describes how fast one-dimensional values change during animations.
... the easing functions in the cubic-bezier subset of easing functions are often called "smooth" easing functions, because they can be used to smooth down the start and end of the animation.
... syntax there are three types of easing function: linear, cubic bézier curves, and staircase functions.
...And 21 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.
...And 3 more matches

The Business Benefits of Web Standards - Archive of obsolete content
there should be little need to plunge into the increasing costs and uncertain quality and integrity of proprietary pay per click campaigns.
...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.
...increasingly one person may need to acccess the same site using different platforms at home, in the office and when travelling.
...And 5 more matches

Index - Web APIs
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.
... 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.
... 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.
...And 5 more matches

Intersection Observer API - Web APIs
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.
... 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.
...And 4 more matches

KeyframeEffect.setKeyframes() - Web APIs
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.
...And 4 more matches

Keyframe Formats - Web APIs
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.
...And 4 more matches

Applying styles and colors - Web APIs
by increasing the steps, you can achieve something that looks like the color palettes photoshop uses.
...every step in the for loop draws a set of circles with an increasing radius.
...by increasing the step count and in effect drawing more circles, the background would completely disappear from the center of the image.
...And 3 more matches

Building up a basic demo with A-Frame - Game development
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.
...the animation uses ease for easing, with tween.js being implemented internally.
...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;" rotation="10 0 0" position="-3 1 0"> <a-animation attribute="scale" to="1 0.5 1" direction="alternate" dur="2000" repeat="indefinite" easing="linear"> </a-animation> </a-entity> the attribute we want to animate for the torus is scale.
...the easing we're going to use is linear.

Work with animations - Firefox Developer Tools
the bar is shaped to reflect the easing effect used for the animation.
... 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 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.

IDBCursorSync - Web APIs
constants constant value description next 0 this cursor includes duplicates, and its direction is monotonically increasing in the order of keys.
... next_no_duplicate 1 this cursor does not include duplicates, and its direction is monotonically increasing in the order of keys.
... prev 2 this cursor includes duplicates, and its direction is monotonically decreasing in the order of keys.
... prev_no_duplicate 3 this cursor does not include duplicates, and its direction is monotonically decreasing in the order of keys.

Inputs and input sources - Web APIs
if the primary action ends successfully (for example, due to the user releasing the button or trigger), rather than because of an error, the select event is sent.
...the code presumes the existence of an avatar object representing the character, as used in several other eamples on this page, as well as the pickupobject() and dropobject() functions, which handle transferring an object from the world to a particular hand and releasing an object from the hand and placing it back into the world.
... dropping the object: the squeeze event handler the squeeze event is received when the user ends the squeeze action by releasing their grip.
... in this example, we interpret that as releasing the currently-held object, dropping it into the scene at the targeted location.

Using the Web Animations API - Web APIs
and instead of timing-function we use easing.
... we aren’t listing an easing value here because, unlike css animations where the default animation-timing-function is ease, in the web animations api the default easing is linear — which is what we want here.
... pausing and playing animations we’ll talk more about alice’s animation later, but for now, let’s look closer at the cupcake’s animation: var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); the element.animate() method will immediately run after it is called.
...noticed something odd about the cake’s duration: duration: alicechange.effect.getcomputedtiming().duration / 2 to understand what’s happening here, let’s take a look at alice’s animation: var alicechange = document.getelementbyid('alice').animate( [ { transform: 'translate(-50%, -50%) scale(.5)' }, { transform: 'translate(-50%, -50%) scale(2)' } ], { duration: 8000, easing: 'ease-in-out', fill: 'both' }); alice’s animation has her going from half her size to twice her size over 8 seconds.

Appendix: What you should know about open-source software licenses - Archive of obsolete content
picking a license for original works if you are releasing source code you have developed yourself, you need to pick a license.
...(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.
...this is easy to use when you are releasing new documents.

Index - Archive of obsolete content
the same process occurs when decreasing the size, except in the other direction.
...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.
...chome is not mentioned at all, but is becoming increasingly popular.