Search completed in 1.33 seconds.
DocumentTimeline.DocumentTimeline() - Web APIs
the document
timeline() constructor of the web animations api creates a new instance of the document
timeline object associated with the active document of the current browsing context.
... syntax var shared
timeline = new document
timeline(options); parameters options an object specifying options for the new
timeline.
... currently the only supported option is the origintime member which specifies the zero time for the document
timeline as a real number of milliseconds relative to the navigationstart moment of the active document for the current browsing context.
...And 2 more matches
Document.timeline - Web APIs
the
timeline readonly property of the document interface represents the default
timeline of the current document.
... this
timeline is a special instance of document
timeline that is automatically created on page load.
... this
timeline is unique to each document and persists for the lifetime of the document including calls to document.open().
...And 5 more matches
DocumentTimeline - Web APIs
the document
timeline interface of the the web animations api represents animation
timelines, including the default document
timeline (accessed via document.
timeline).
... constructor document
timeline() creates a new document
timeline object associated with the active document of the current browsing context.
... properties this interface inherits its property from its parent, animation
timeline.
...And 3 more matches
Animation.timeline - Web APIs
the animation.
timeline property of the animation interface returns or sets the
timeline associated with this animation.
... a
timeline is a source of time values for synchronization purposes, and is an animation
timeline-based object.
... by default, the animation's
timeline and the document's
timeline are the same.
...And 2 more matches
AnimationTimeline.currentTime - Web APIs
the currenttime read-only property of the web animations api's animation
timeline interface returns the
timeline's current time in milliseconds, or null if the
timeline is inactive.
... syntax var currenttime = animation
timeline.currenttime; value a number representing the
timeline's current time in milliseconds, or null if the
timeline is inactive.
... reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation
timeline.currenttime might get rounded depending on browser settings.
...And 2 more matches
AnimationTimeline - Web APIs
the animation
timeline interface of the web animations api represents the
timeline of an animation.
... this interface exists to define
timeline features (inherited by document
timeline and future
timeline types) and is not itself directly used by developers.
... anywhere you see animation
timeline, you should use document
timeline or any other
timeline type instead.
...And 2 more matches
Performance Timeline - Web APIs
the performance
timeline api defines extensions to the performance interface to support client-side latency measurements within applications.
...the standard also includes interfaces that allow an application to define performance observer callbacks that are notified when specific performance events are added to the browser's performance
timeline.
...for more details about the interfaces, see the reference pages and using performance
timeline.
...And 2 more matches
Using Performance Timeline - Web APIs
the performance
timeline standard defines extensions to the performance interface to support client-side latency measurements within applications.
... performance extensions performance
timeline extends the performance object with three methods that provide different mechanisms to get a set of performance records (metrics), depending on the specified filter criteria.
... specifications the interfaces described in this document are defined in the performance
timeline standard which has two levels: performance
timeline level 2; editors draft; work in progress.
... performance
timeline; w3c recommendation 12 december 2013 see also performance
timeline (overview) a primer for web performance timing apis ...
AnimationPlaybackEvent.timelineTime - Web APIs
the
timelinetime read-only property of the animationplaybackevent interface represents the time value of the animation's
timeline at the moment the event is queued.
... this will be unresolved if the animation was not associated with a
timeline at the time the event was generated or if the associated
timeline was inactive.
... specifications specification status comment web animationsthe definition of 'animationplaybackevent.
timelinetime' in that specification.
Index - Web APIs
62 animation api, animations, experimental, interface, reference, web animations, waapi, web animations api the animation interface of the web animations api represents a single animation player and provides playback controls and a
timeline for an animation node or source.
... 80 animation.
timeline api, animation, experimental, property, reference, web animations,
timeline, web animations api the animation.
timeline property of the animation interface returns or sets the
timeline associated with this animation.
... a
timeline is a source of time values for synchronization purposes, and is an animation
timeline-based object.
...And 32 more matches
User Timing API - Web APIs
the user timing interface allows the developer to create application specific timestamps that are part of the browser's performance
timeline.
...the mark is a timestamp in the browser's performance
timeline.
... retrieving performance marks the performance interface has three methods that can be used to retrieve a mark: performance.getentries() returns all performance entries in the performance
timeline.
...And 10 more matches
Web Animations API Concepts - Web APIs
the timing model keeps track of how far along a set
timeline we've come.
...each document has a master
timeline, document.
timeline, which stretches from the moment the page is loaded to infinity — or until the window is closed.
... spread along that
timeline according to their durations are our animations.
...And 9 more matches
Profiling with the Firefox Profiler
timeline the
timeline has several rows of tracing markers (colored segments) which indicate interesting events.
... thread
timeline(s) thread/process
timelines: below the tracing markers we have a list of profiled threads.
...each of these
timelines is aligned with wall clock time.
...And 7 more matches
Using the User Timing API - Web APIs
the user timing interface allows the developer to create application specific timestamps that are part of the browser's performance
timeline.
... this document shows how to create mark and measure performance entry types and how to use user timing methods (which are extensions of the performance interface) to retrieve and remove entries from the browser's performance
timeline.
...the mark is a timestamp in the browser's performance
timeline.
...And 7 more matches
Work with animations - Firefox Developer Tools
this article covers three tools you can use to visualize and edit animations: the animation inspector editing @keyframes editing timing functions animation inspector the page inspector's animations view displays animations in the page synchronized along a
timeline, with a draggable widget you can use to move to any point in the
timeline and see the page at that point.
... right-click in the box and select "inspect element" make sure the selected element is the <div class="channel"> switch over to the "animations" tab play the animation let's take a closer look at the contents of the animation inspector here: it shows a synchronized
timeline for every animation applied to the selected element or its children.
... the
timeline starts at the start of the first animation, ends at the end of the last animation, and is labeled with markers every 250 milliseconds (this depends on the time scale of the animations currently displayed).
...And 3 more matches
Performance API - Web APIs
performanceentry provides methods and properties the encapsulate a single performance metric that is part of the performance
timeline.
...entries of this type are created by calling performance.mark() to add a named domhighrestimestamp (the mark) to the browser's performance
timeline.
...entries of this type are created by calling performance.measure() to add a nameddomhighrestimestamp (the measure) between two marks to the browser's performance
timeline.
...And 3 more matches
Animation() - Web APIs
syntax var animation = new animation([effect][,
timeline]); parameters effect optional the target effect, as an object based on the animationeffectreadonly interface, to assign to the animation.
...
timeline optional specifies the
timeline with which to associate the animation, as an object of a type based on the animation
timeline interface.
... currently the only
timeline type available is document
timeline, but in the future there my be
timelines associated with gestures or scrolling, for example.
...And 2 more matches
Web Animations API - Web APIs
web animations interfaces animation provides playback controls and a
timeline for an animation node or source.
... animation
timeline represents the
timeline of animation.
... this interface exists to define
timeline features (inherited by document
timeline and future
timeline objects) and is not itself accessed by developers.
...And 2 more matches
Using the Frame Timing API - Web APIs
when one of those event types is added to the browser's performance
timeline, the application is notified of the event via the observer's callback function that was specified when the observer was created.
...rmanceobserver(frame_observer_2); obs.observe({entrytypes: ['frame']}); } function frame_observer_2(list) { // log the frame entries var perfentries = list.getentriesbytype("frame"); for (var i=0; i < perfentries.length; i++) { console.log("obs #2: [" + i + "] = " + perfentries[i].name); } } <body onload="init(event)"> when the browser adds a new "frame" entry to the performance
timeline, both of the observer callbacks will be invoked.
... }); // only observe 'frame' events observe_frame.observe({entrytypes: ['frame']}); in the following example, the observer registers to be notified when several different performance entry types are added to the performance
timeline.
...see performance profiling with the
timeline for more information about this tool.
<audio>: The Embed Audio element - HTML: Hypertext Markup Language
other audio may have a media
timeline that doesn't start at 0 seconds, so setting currenttime to a time before that would fail.
... for example, if the audio's media
timeline starts at 12 hours, setting currenttime to 3600 would be an attempt to set the current playback position well before the beginning of the media, and would fail.
... the getstartdate() method can be used to determine the beginning point of the media
timeline's reference frame.
... duration read only a double-precision floating-point value which indicates the duration (total length) of the audio in seconds, on the media's
timeline.
Measuring performance - Learn web development
the performance api, which provides access to performance-related information for the current page, includes the performance
timeline api, the navigation timing api, the user timing api, and the resource timing api.
... the performanceentry object is part of the performance
timeline.
... the performanceobserver api can be used to observe performance measurement events and it can notify you of new performance entries as they are recorded in the browser's performance
timeline.
Web Replay
timeline the
timeline is shown above the developer tools and provides several features to help with navigating the recording: the
timeline changes color depending on whether the tab is currently recording (red) or replaying (blue).
... the current position within the recording is shown on the
timeline with a progress indicator.
... console error/messages are marked on the
timeline and can be clicked to seek to that point.
WebReplayRoadmap
time travel features more features are planned for the
timeline, as described below.
... these messages will show up on the
timeline and can be seeked to in the same way as other console messages.
... bookmarks (not yet implemented) it would be nice to be able to bookmark points in the recording so that they show up on the
timeline and can be seeked to later.
Network request list - Firefox Developer Tools
timeline the request list also displays a
timeline for the different parts of each request.
... each
timeline is given a horizontal position in its row relative to the other network requests, so you can see the total time taken to load the page.
... starting in firefox 45, the
timeline also contains two vertical lines: the blue line marks the point at which the page's domcontentloaded event is triggered.
Animation - Web APIs
the animation interface of the web animations api represents a single animation player and provides playback controls and a
timeline for an animation node or source.
...if the animation lacks a
timeline, is inactive or hasn't been played yet, its value is null.
... animation.
timeline gets or sets the
timeline associated with this animation.
Frame Timing API - Web APIs
the observer (callback) will be notified when new "frame" events are added to the browser's performance
timeline and the frame's duration (length of time) will be available.
...when one of those event types is recorded in the browser's performance
timeline, the application is notified of the event via the observer's callback function that was specified when the observer was created.
...when the browser adds a new frame to the performance
timeline, the specified observer callback will be invoked.
Performance - Web APIs
it's part of the high resolution time api, but is enhanced by the performance
timeline api, the navigation timing api, the user timing api, and the resource timing api.
... performance
timeline level 2the definition of 'performance extensions' in that specification.
... performance
timelinethe definition of 'performance extensions' in that specification.
PerformanceEntry - Web APIs
the performanceentry object encapsulates a single performance metric that is part of the performance
timeline.
... performance
timeline level 2the definition of 'performanceentry' in that specification.
... performance
timelinethe definition of 'performanceentry' in that specification.
Web APIs
e timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance
timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api ...
... a angle_instanced_arrays abortcontroller abortsignal absoluteorientationsensor abstractrange abstractworker accelerometer addresserrors aescbcparams aesctrparams aesgcmparams aeskeygenparams ambientlightsensor analysernode animation animationeffect animationevent animationplaybackevent animation
timeline arraybufferview attr audiobuffer audiobuffersourcenode audioconfiguration audiocontext audiocontextlatencycategory audiocontextoptions audiodestinationnode audiolistener audionode audionodeoptions audioparam audioparamdescriptor audioparammap audioprocessingevent audioscheduledsourcenode audiotrack audiotracklist audioworklet audioworkletglobalscope audioworkletnode audioworkletnodeoption...
... domuserdata datatransfer datatransferitem datatransferitemlist dedicatedworkerglobalscope delaynode deprecationreportbody devicelightevent devicemotionevent devicemotioneventacceleration devicemotioneventrotationrate deviceorientationevent deviceproximityevent directoryentrysync directoryreadersync displaymediastreamconstraints document documentfragment documentorshadowroot document
timeline documenttouch documenttype doublerange dragevent dynamicscompressornode e ext_blend_minmax ext_color_buffer_float ext_color_buffer_half_float ext_disjoint_timer_query ext_float_blend ext_frag_depth ext_srgb ext_shader_texture_lod ext_texture_compression_bptc ext_texture_compression_rgtc ext_texture_filter_anisotropic eckeygenparams eckeyimportparams ecdhkeyderiveparams ecdsaparams effecttiming...
<video>: The Video Embed element - HTML: Hypertext Markup Language
other media may have a media
timeline that doesn't start at 0 seconds, so setting currenttime to a time before that would fail.
... the getstartdate() method can be used to determine the beginning point of the media
timeline's reference frame.
... duration read only a double-precision floating-point value which indicates the duration (total length) of the media in seconds, on the media's
timeline.
Gecko Profiler FAQ
overview of the changes in the last (year?) to cleopatra/etc faster, hopefully more reliable has a
timeline tab lets you hide threads with a context menu supports symbolication for local builds on windows if you run “mach buildsymbols” first profiling non-nsthreads?
... if you have a rough idea of what the user was doing, try searching for functions that you’d expect in the call tree and see where they are in the thread
timeline.
Memory Profiler
another common approach is to plot the allocations or the memory usages along the
timeline.
...
timeline view this view shows the allocation event across the period of time.
nsIDOMHTMLTimeRanges
return value the time at which the specified range ends, in seconds measured from the beginning of the
timeline represented by the object.
... return value the time at which the specified range starts, in seconds measured from the beginning of the
timeline represented by the object.
Migrating from Firebug - Firefox Developer Tools
both tools provide similar information including a
timeline showing the request and response times of the network requests.
... view request timings firebug offers detailed information about the network timings related to a request by hovering the
timeline column within its net panel.
Network request details - Firefox Developer Tools
timings tab the timings tab provides information about how long each stage of a network request took, with a more detailed, annotated, view of the
timeline bar, so it is easy to locate performance bottlenecks.
... note: future versions will also show this information when entries in the network monitor
timeline graph are moused over (see bug 1580493).
Animating CSS properties - Firefox Developer Tools
exactly what you'll see depends a lot on your machine and system load, but it will be something like this: this is showing three distinct views: (a) an overview of the waterfall, (b) the frame rate, and (c) the
timeline details.
... waterfall the
timeline view shows the reason for the improved frame rate.
MediaStreamTrack: mute event - Web APIs
musictrack.addeventlistener("mute", event => { document.getelementbyid("
timeline-widget").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("
timeline-widget").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id
timeline-widget gets its background color changed to #aaa.
...the following example shows this: musictrack.onmute = event => { document.getelementbyid("
timeline-widget").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("
timeline-widget").style.backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'mute' in that specification.
MediaStreamTrack: unmute event - Web APIs
musictrack.addeventlistener("mute", event => { document.getelementbyid("
timeline-widget").style.backgroundcolor = "#aaa"; }, false); musictrack.addeventlistener("unmute", event => { document.getelementbyid("
timeline-widget").style.backgroundcolor = "#fff"; }, false); with these event handlers in place, when the track musictrack enters its muted state, the element with the id
timeline-widget gets its background color changed to #aaa.
...the following example shows this: musictrack.onmute = event => { document.getelementbyid("
timeline-widget").style.backgroundcolor = "#aaa"; } musictrack.mute = event = > { document.getelementbyid("
timeline-widget").style.backgroundcolor = "#fff"; } specifications specification status comment media capture and streamsthe definition of 'unmute' in that specification.
performance.getEntries() - Web APIs
etentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (let i=0; i < p.length; i++) { console.log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status comment performance
timeline level 2the definition of 'getentries()' in that specification.
... candidate recommendation performance
timelinethe definition of 'getentries()' in that specification.
performance.getEntriesByName() - Web APIs
// use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status comment performance
timeline level 2the definition of 'getentriesbyname()' in that specification.
... candidate recommendation performance
timelinethe definition of 'getentriesbyname()' in that specification.
performance.getEntriesByType() - Web APIs
// use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status comment performance
timeline level 2the definition of 'getentriesbytype()' in that specification.
... candidate recommendation performance
timelinethe definition of 'getentriesbytype()' in that specification.
PerformanceEntry.duration - Web APIs
or (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance
timeline level 2the definition of 'duration' in that specification.
... candidate recommendation performance
timelinethe definition of 'duration' in that specification.
PerformanceEntry.entryType - Web APIs
od performance.mark("begin"); // check the entrytype of all the "begin" entries var entriesnamedbegin = performance.getentriesbyname("begin"); for (var i=0; i < entriesnamedbegin.length; i++) { var typeofentry = entriesnamedbegin[i].entrytype; console.log("entry is type: " + typeofentry); } } specifications specification status comment performance
timeline level 2the definition of 'entrytype' in that specification.
... candidate recommendation performance
timelinethe definition of 'entrytype' in that specification.
PerformanceEntry.name - Web APIs
or (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance
timeline level 2the definition of 'name' in that specification.
... candidate recommendation performance
timelinethe definition of 'name' in that specification.
PerformanceEntry.startTime - Web APIs
or (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance
timeline level 2the definition of 'starttime' in that specification.
... candidate recommendation performance
timelinethe definition of 'starttime' in that specification.
PerformanceObserver - Web APIs
the performanceobserver interface is used to observe performance measurement events and be notified of new performance entries as they are recorded in the browser's performance
timeline.
... example function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance
timeline level 2the definition of 'performanceobserver' in that specification.
SVGAnimationElement: beginEvent event - Web APIs
the beginevent event of the svganimationelement interface is fired when the element local
timeline begins to play.
...scheduled or interactive)
timeline play, as well as in the case that the element was begun with a dom method.
SVGAnimationElement - Web APIs
beginevent fired when the element local
timeline begins to play.
... repeatevent fired when the element's local
timeline repeats.
SVGSVGElement - Web APIs
if getcurrenttime() is called before the document
timeline has begun (for example, by script running in a <script> element before the document's svgload event is dispatched), then 0 is returned.
...if setcurrenttime() is called before the document
timeline has begun (for example, by script running in a <script> element before the document's svgload event is dispatched), then the value of seconds in the last invocation of the method gives the time that the document will seek to once the document
timeline has begun.
Using the Web Animations API - Web APIs
we can divide her duration in half to get the midpoint for her animation’s
timeline, setting her to be normal height.
...we can figure out whether she's on the large end or small end of her animation by getting her animation's currenttime and dividing it by her activeduration: var endgame = function() { // get alice's
timeline's playhead location var aliceplayhead = alicechange.currenttime; var alice
timeline = alicechange.effect.getcomputedtiming().activeduration; // stops alice's and other animations stopplayingalice(); // depending on which third it falls into var aliceheight = aliceplayhead / alice
timeline; if (aliceheight <= .333){ // alice got smaller!
font-display - CSS: Cascading Style Sheets
description the font display
timeline the font display
timeline is based on a timer that begins the moment the user agent attempts to use a given downloaded font face.
... the
timeline is divided into the three periods below which dictate the rendering behavior of any elements using the font face.
Animation performance and frame rate - Web Performance
exactly what you'll see depends a lot on your machine and system load, but it will be something like this: this is showing three distinct views: (a) an overview of the waterfall, (b) the frame rate, and (c) the
timeline details.
... waterfall the
timeline view shows the reason for the improved frame rate.
Web Performance
resource timing api resource loading and timing the loading of those resources, including managing the resource buffer and coping with cors the performance
timeline the performance
timeline standard defines extensions to the performance interface to support client-side latency measurements within applications.
... user timing api create application specific timestamps using the user timing api's "mark" and "measure" entry types - that are part of the browser's performance
timeline.
request - Archive of obsolete content
the example below shows how to use request to get the most recent tweet from the @mozhacks account: var request = require("sdk/request").request; var latesttweetrequest = request({ url: "https://api.twitter.com/1.1/statuses/user_
timeline.json?screen_name=mozhacks&count=1", oncomplete: function (response) { var tweet = response.json[0]; console.log("user: " + tweet.user.screen_name); console.log("tweet: " + tweet.text); } }); // be a good consumer and check for rate limiting before doing more.
Index
this article suggests the steps you might want to follow, as well as offering some pointers to a suitable
timeline.
Localizing with Pontoon
info menu gives important information, like the anticipated project
timeline and a list of keyboard shortcuts.
Scroll-linked effects
the proposals currently under consideration are: web animations: a new api for precisely controlling web animations in javascript, with an additional proposal to map scroll position to time and use that as a
timeline for the animation.
Plugin Roadmap for Firefox - Plugins
2014 - update on npapi deprecation november 2014 - the final countdown for npapi august 2016 - flash and chrome december 2016 - roll-out plan for html5 by default july 2017 - saying goodbye to flash in chrome microsoft edge and internet explorer april 2016 - putting users in control of flash december 2016 - extending user control of flash with click-to-run july 2017 - flash on windows
timeline august 2019 - update on removing flash from microsoft edge and internet explorer apple safari june 2016 - next steps for legacy plug-ins july 2017 - adobe announces flash distribution and updates to end ...
Animation.onfinish - Web APIs
you can force the animation into the "finished" state by setting its starttime to document.
timeline.currenttime - (animation.currenttime * animation.playbackrate).
Animation.playbackRate - Web APIs
animations have a playback rate that provides a scaling factor from the rate of change of the animation's
timeline time values to the animation’s current time.
Animation.startTime - Web APIs
an animation’s start time is the time value of its document
timeline when its target keyframeeffect is scheduled to begin playback.
AudioNode.connect() - Web APIs
next, it will mix it together with any other such outputs, and the intrinsic parameter value (the value the audioparam would normally have without any audio connections), including any
timeline changes scheduled for the parameter.
BaseAudioContext.currentTime - Web APIs
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.
Console.timeStamp() - Web APIs
this lets you correlate a point in your code with the other events recorded in the
timeline, such as layout and paint events.
console - Web APIs
console.timestamp() adds a marker to the browser's
timeline or waterfall tool.
Document - Web APIs
document.
timelineread only returns
timeline as a special instance of document
timeline that is automatically created on page load.
EffectTiming.direction - Web APIs
the direction property of the web animations api dictionary effecttiming indicates an animation's playback direction along its
timeline, as well as its behavior when it reaches the end of an iteration element.animate(), keyframeeffectreadonly(), and keyframeeffect() all accept an object of timing properties including direction.
EffectTiming.fill - Web APIs
var rabbitdownkeyframes = new keyframeeffect( whiterabbit, [ { transform: 'translatey(0%)' }, { transform: 'translatey(100%)' } ], { duration: 3000, fill: 'forwards' } ); // set up the rabbit's animation to play on command by calling rabbitdownanimation.play() later var rabbitdownanimation = new animation(rabbitdownkeyframes, document.
timeline); alternatives to fill modes fill modes are primarily provided as a means of representing the animation-fill-mode feature of css animations.
PerformanceEntry.toJSON() - Web APIs
or (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[methods[i]] == "function"; if (supported) { var js = obj[methods[i]](); log("..." + methods[i] + "() = " + json.stringify(js)); } else { log("..." + methods[i] + " = not supported"); } } } specifications specification status comment performance
timeline level 2the definition of 'tojson' in that specification.
PerformanceMark - Web APIs
entries of this type are created by calling performance.mark() to add a named domhighrestimestamp (the mark) to the browser's performance
timeline.
PerformanceMeasure - Web APIs
entries of this type are created by calling performance.measure() to add a named domhighrestimestamp (the measure) between two marks to the browser's performance
timeline.
PerformanceObserver() - Web APIs
(var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance
timeline level 2the definition of 'performanceobserver()' in that specification.
PeformanceObserver.disconnect() - Web APIs
// disable additional performance events observer.disconnect(); } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance
timeline level 2the definition of 'disconnect()' in that specification.
PerformanceObserver.observe() - Web APIs
(var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); function perf_observer(list, observer) { // process the "measure" event } var observer2 = new performanceobserver(perf_observer); observer2.observe({entrytypes: ["measure"]}); specifications specification status comment performance
timeline level 2the definition of 'observe()' in that specification.
PerformanceObserver.takeRecords() - Web APIs
{ var entries = list.getentries(); for (var i=0; i < entries.length; i++) { // process "mark" and "frame" events } }); observer.observe({entrytypes: ["mark", "frame"]}); var records = observer.takerecords(); console.log(records[0].name); console.log(records[0].starttime); console.log(records[0].duration); specifications specification status comment performance
timeline level 2the definition of 'takerecords()' in that specification.
PerformanceObserverEntryList.getEntries() - Web APIs
var observe_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to frame event only observe_frame.observe({entrytypes: ['frame']}); specifications specification status comment performance
timeline level 2the definition of 'getentries()' in that specification.
PerformanceObserverEntryList.getEntriesByName() - Web APIs
serve_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to only the 'frame' event observe_frame.observe({entrytypes: ['frame']}); specifications specification status comment performance
timeline level 2the definition of 'getentriesbyname()' in that specification.
PerformanceObserverEntryList.getEntriesByType() - Web APIs
serve_frame = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); // should only have 'frame' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to only the 'frame' event observe_frame.observe({entrytypes: ['frame']}); specifications specification status comment performance
timeline level 2the definition of 'getentriesbytype()' in that specification.
PerformanceObserverEntryList - Web APIs
server for all performance event types // list is of type performanceobserveentrylist var observe_all = new performanceobserver(function(list, obs) { var perfentries = list.getentries(); for (var i = 0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); // do something with it } }) specifications specification status comment performance
timeline level 2the definition of 'performanceobserverentrylist' in that specification.
PerformanceResourceTiming - Web APIs
the interface's properties create a resource loading
timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc..
Using the Resource Timing API - Web APIs
the interface's properties create a resource loading
timeline with high-resolution timestamps for network events such as redirect start and end times, fetch start, dns lookup start and end times, response start and end times, etc.
Resource Timing API - Web APIs
the interface's properties create a resource loading
timeline with high-resolution timestamps for network events such as redirect start and end times, dns lookup start and end times, request start, response start and end times, etc.
Window.performance - Web APIs
it serves as the point of exposure for the performance
timeline api, the high resolution time api, the navigation timing api, the user timing api, and the resource timing api.
WebKit CSS extensions - CSS: Cascading Style Sheets
oad-button ::-webkit-inner-spin-button ::-webkit-input-placeholder ::-webkit-media-controls ::-webkit-media-controls-current-time-display ::-webkit-media-controls-enclosure ::-webkit-media-controls-fullscreen-button ::-webkit-media-controls-mute-button ::-webkit-media-controls-overlay-enclosure ::-webkit-media-controls-panel ::-webkit-media-controls-play-button ::-webkit-media-controls-
timeline ::-webkit-media-controls-time-remaining-display ::-webkit-media-controls-toggle-closed-captions-button ::-webkit-media-controls-volume-control-container ::-webkit-media-controls-volume-control-hover-background ::-webkit-media-controls-volume-slider ::-webkit-meter-bar ::-webkit-meter-even-less-good-value ::-webkit-meter-inner-element ::-webkit-meter-optimum-value ::-webkit-meter-subopti...
Guide to Web APIs - Developer guides
e timing apifullscreen apiggamepad api geolocation apihhtml drag and drop apihigh resolution timehistory apiiimage capture apiindexeddbintersection observer apillong tasks api mmedia capabilities api media capture and streamsmedia session apimedia source extensions mediastream recordingnnavigation timingnetwork information api ppage visibility apipayment request apiperformance apiperformance
timeline apipermissions apipointer eventspointer lock apiproximity events push api rresize observer apiresource timing apisserver sent eventsservice workers apistoragestorage access apistreams ttouch eventsuurl apivvibration apivisual viewport wweb animationsweb audio apiweb authentication apiweb crypto apiweb notificationsweb storage apiweb workers apiwebglwebrtcwebvttwebxr device apiwebsockets api ...
Autoplay guide for media and Web Audio APIs - Web media technologies
to autoplay videos like these, you have two options: don't have an audio track, or have an audio track but configure the <video> element to mute the audio by default, like this: <video src="/videos/awesomevid.webm" controls autoplay muted> this video element is configured to include the user controls (typically play/pause, scrubbing through the video's
timeline, volume control, and muting); also, since the muted attribute is included, the video will autoplay but with the audio muted.
externalResourcesRequired - SVG: Scalable Vector Graphics
if an external resource is not available, progressive rendering is suspended, the document's svgload event is not fired and the animation
timeline does not begin until that resource and all other required resources become available, have been parsed and are ready to be rendered.