René's URL Explorer Experiment


Title: JavaScript Animations | W3docs

Open Graph Title: JavaScript Animations

X Title: JavaScript Animations

Description: Learn JavaScript animations with requestAnimationFrame, easing functions, chaining, the Web Animations API, and performance and accessibility best practices.

Open Graph Description: Learn JavaScript animations with requestAnimationFrame, easing functions, chaining, the Web Animations API, and performance and accessibility best practices.

X Description: Learn JavaScript animations with requestAnimationFrame, easing functions, chaining, the Web Animations API, and performance and accessibility best practices.

Opengraph URL: https://www.w3docs.com/learn-javascript/javascript-animations

X: @w3docs

direct link

Domain: www.w3docs.com

Hey, it has json ld scripts: 
{"@context":"https://schema.org","@type":"Article","@id":"https://www.w3docs.com/learn-javascript/javascript-animations#article","headline":"JavaScript Animations","description":"Learn JavaScript animations with requestAnimationFrame, easing functions, chaining, the Web Animations API, and performance and accessibility best practices.","inLanguage":"en","url":"https://www.w3docs.com/learn-javascript/javascript-animations","isPartOf":{"@id":"https://www.w3docs.com/#website"},"publisher":{"@id":"https://www.w3docs.com/#organization"}}
 
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://www.w3docs.com/"},{"@type":"ListItem","position":2,"name":"Learn JavaScript","item":"https://www.w3docs.com/learn-javascript"},{"@type":"ListItem","position":3,"name":"JavaScript Animations","item":"https://www.w3docs.com/learn-javascript/javascript-animations"}]}
 
{"@context":"https://schema.org","@type":"Organization","@id":"https://www.w3docs.com/#organization","name":"W3docs","url":"https://www.w3docs.com/","logo":"https://www.w3docs.com/build/images/logo-amp.png","sameAs":["https://x.com/w3docs","https://www.facebook.com/w3docs","https://github.com/w3docs","https://linkedin.com/company/w3docs"]}
 
{"@context":"https://schema.org","@type":"WebSite","@id":"https://www.w3docs.com/#website","name":"W3docs","url":"https://www.w3docs.com/","inLanguage":"en","publisher":{"@id":"https://www.w3docs.com/#organization"}}
og:site_nameW3docs
og:localeen_US
og:imagehttps://www.w3docs.com/build/images/logo-amp.png
og:typearticle
twitter:cardsummary_large_image
twitter:imagehttps://www.w3docs.com/build/images/logo-amp.png

Links:

W3docshttps://www.w3docs.com/
Learn HTMLhttps://www.w3docs.com/learn-html
Learn CSShttps://www.w3docs.com/learn-css
Learn JavaScripthttps://www.w3docs.com/learn-javascript
Learn Githttps://www.w3docs.com/learn-git
Learn Javahttps://www.w3docs.com/learn-java
Learn PHPhttps://www.w3docs.com/learn-php
Learn Pythonhttps://www.w3docs.com/learn-python
Courseshttps://www.w3docs.com/course
Quizzeshttps://www.w3docs.com/quiz
Exerciseshttps://www.w3docs.com/exercise
Snippetshttps://www.w3docs.com/snippets
HTML Editorhttps://www.w3docs.com/tools/editor
Password Generatorhttps://www.w3docs.com/tools/password-generator
HTML Encoderhttps://www.w3docs.com/tools/html-encoder
Code Diffhttps://www.w3docs.com/tools/code-diff
JSON Beautifierhttps://www.w3docs.com/tools/json-beautify
All 13 →https://www.w3docs.com/tool
Color Pickerhttps://www.w3docs.com/color/color-picker
Color Converterhttps://www.w3docs.com/color/color-converter
Color mixerhttps://www.w3docs.com/color/color-mixer
Color Hexhttps://www.w3docs.com/color/color-hex
Colors HSLhttps://www.w3docs.com/color/color-hsl
All 10 →https://www.w3docs.com/tool
String Length Calculatorhttps://www.w3docs.com/tools/string-length-calculator
MD5 Hash Generatorhttps://www.w3docs.com/tools/string-md5-generator
Sha256 Hash Generatorhttps://www.w3docs.com/tools/string-sha256-generator
String Reversehttps://www.w3docs.com/tools/string-revers
URL Encoderhttps://www.w3docs.com/tools/string-url-encoder
All 19 →https://www.w3docs.com/tool
Javascript Formatterhttps://www.w3docs.com/tools/formatter/javascript
CSS Formatterhttps://www.w3docs.com/tools/formatter/css
HTML Formatterhttps://www.w3docs.com/tools/formatter/html
Json Formatterhttps://www.w3docs.com/tools/formatter/json
PHP Formatterhttps://www.w3docs.com/tools/formatter/php
Englishenhttps://www.w3docs.com/learn-javascript/javascript-animations
Deutschdehttps://de.w3docs.com/learn-javascript/javascript-animations
Русскийruhttps://ru.w3docs.com/learn-javascript/javascript-animations
Françaisfrhttps://fr.w3docs.com/learn-javascript/javascript-animations
Españoleshttps://es.w3docs.com/learn-javascript/javascript-animations
Portuguêspthttps://pt.w3docs.com/learn-javascript/javascript-animations
Italianoithttps://it.w3docs.com/learn-javascript/javascript-animations
Log inhttps://www.w3docs.com/api/auth/login
Learn JavaScripthttps://www.w3docs.com/learn-javascript
Introductionhttps://www.w3docs.com/learn-javascript/javascript-intro
Start using Javascripthttps://www.w3docs.com/learn-javascript/start-using-javascript
JS Commentshttps://www.w3docs.com/learn-javascript/javascript-comments
JS with DOMhttps://www.w3docs.com/learn-javascript/javascript-with-dom
JS Use Stricthttps://www.w3docs.com/learn-javascript/javascript-use-strict
JS Variableshttps://www.w3docs.com/learn-javascript/javascript-variables
JS Data Typeshttps://www.w3docs.com/learn-javascript/javascript-data-types
JS Type Conversionshttps://www.w3docs.com/learn-javascript/type-conversions
JS Interactive Functionshttps://www.w3docs.com/learn-javascript/interactive-functions
JS Operatorshttps://www.w3docs.com/learn-javascript/operators
JS Comparison operatorshttps://www.w3docs.com/learn-javascript/comparison-operators
JS Logical Operatorshttps://www.w3docs.com/learn-javascript/logical-operators
JS Nullish Coalescing (??)https://www.w3docs.com/learn-javascript/nullish-coalescing-operator
JS Conditional operatorshttps://www.w3docs.com/learn-javascript/conditional-operators
JS Switchhttps://www.w3docs.com/learn-javascript/javascript-switch
JS Loopshttps://www.w3docs.com/learn-javascript/javascript-loops
JS Functionshttps://www.w3docs.com/learn-javascript/javascript-functions
JS Function Expressionshttps://www.w3docs.com/learn-javascript/function-expressions
JS Arrow Functionshttps://www.w3docs.com/learn-javascript/arrow-functions-the-basics
JS ES6https://www.w3docs.com/learn-javascript/javascript-es6
JS Objectshttps://www.w3docs.com/learn-javascript/javascript-objects
JS Object Copyinghttps://www.w3docs.com/learn-javascript/object-references-and-copying
JS Object methods, "this"https://www.w3docs.com/learn-javascript/object-methods-this
JS Garbage collectionhttps://www.w3docs.com/learn-javascript/garbage-collection
JS Symbol Typeshttps://www.w3docs.com/learn-javascript/symbol-types
JS Object to Primitive Conversionhttps://www.w3docs.com/learn-javascript/object-to-primitive-conversion
JS Constructor, operator "new"https://www.w3docs.com/learn-javascript/constructor-operator-new
JS Optional Chaining (?.)https://www.w3docs.com/learn-javascript/optional-chaining
JS Methods of primitiveshttps://www.w3docs.com/learn-javascript/methods-of-primitives
JS Numbershttps://www.w3docs.com/learn-javascript/numbers
JS Mathhttps://www.w3docs.com/learn-javascript/javascript-math
JS Stringshttps://www.w3docs.com/learn-javascript/strings
JS Arrayshttps://www.w3docs.com/learn-javascript/javascript-array
JS Array methodshttps://www.w3docs.com/learn-javascript/array-methods
JS Iterableshttps://www.w3docs.com/learn-javascript/iterables
JS Map and Sethttps://www.w3docs.com/learn-javascript/map-and-set
JS WeakMap and WeakSethttps://www.w3docs.com/learn-javascript/weakmap-and-weakset
JS Object.keys, Values, Entrieshttps://www.w3docs.com/learn-javascript/object-keys-values-entries
JS Destructuring Assignmenthttps://www.w3docs.com/learn-javascript/destructuring-assignment
JS Date and timehttps://www.w3docs.com/learn-javascript/javascript-date
JS JSON methods, toJSONhttps://www.w3docs.com/learn-javascript/working-with-json
JS Recursion and Stackhttps://www.w3docs.com/learn-javascript/recursion-and-stack
JS Rest Parameters and Spread Syntaxhttps://www.w3docs.com/learn-javascript/rest-parameters-and-spread-syntax
JS Variable scopehttps://www.w3docs.com/learn-javascript/variable-scope
JS The Old “var”https://www.w3docs.com/learn-javascript/the-old-var
JS Global Objecthttps://www.w3docs.com/learn-javascript/global-object
JS Function object, NFEhttps://www.w3docs.com/learn-javascript/function-object-nfe
JS The “new function” Syntaxhttps://www.w3docs.com/learn-javascript/the-new-function-syntax
JS setTimeout and setIntervalhttps://www.w3docs.com/learn-javascript/scheduling-settimeout-and-setinterval
JS Decorators and forwarding, call/applyhttps://www.w3docs.com/learn-javascript/decorators-and-forwarding-call-apply
JS Debounce & Throttlehttps://www.w3docs.com/learn-javascript/debounce-and-throttle
JS Function Bindinghttps://www.w3docs.com/learn-javascript/function-binding
JS Arrow functions revisitedhttps://www.w3docs.com/learn-javascript/arrow-functions-revisited
JS Closureshttps://www.w3docs.com/learn-javascript/javascript-closures
JS Property Flags and Descriptorshttps://www.w3docs.com/learn-javascript/property-flags-and-descriptors
JS Property Getters and Settershttps://www.w3docs.com/learn-javascript/property-getters-and-setters
DOM Introductionhttps://www.w3docs.com/learn-javascript/javascript-html-dom
The DOM Nodeshttps://www.w3docs.com/learn-javascript/understanding-the-dom-nodes
Selecting DOM Elementshttps://www.w3docs.com/learn-javascript/selecting-dom-elements
Manipulating the DOMhttps://www.w3docs.com/learn-javascript/dom-manipulation
Working with Styles in DOMhttps://www.w3docs.com/learn-javascript/working-with-styles-in-dom
Event Handling in DOMhttps://www.w3docs.com/learn-javascript/event-handling-in-dom
Traversing the DOMhttps://www.w3docs.com/learn-javascript/traversing-the-dom
DOM Manipulation Techniqueshttps://www.w3docs.com/learn-javascript/dom-manipulation-techniques
Working with Forms in DOMhttps://www.w3docs.com/learn-javascript/working-with-forms-in-dom
Advanced DOM Techniqueshttps://www.w3docs.com/learn-javascript/advanced-dom-techniques
DOM Manipulation Librarieshttps://www.w3docs.com/learn-javascript/dom-manipulation-libraries
DOM Browser Compatibilityhttps://www.w3docs.com/learn-javascript/dom-browser-compatibility
DOM Accessibility Considerationshttps://www.w3docs.com/learn-javascript/dom-accessibility-considerations
Debugging and Toolshttps://www.w3docs.com/learn-javascript/dom-debugging-and-tools
Performance Optimizationhttps://www.w3docs.com/learn-javascript/dom-performance-optimization
Interactive Elements and Widgetshttps://www.w3docs.com/learn-javascript/dom-nteractive-elements-and-widgets
JS Prototypal inheritancehttps://www.w3docs.com/learn-javascript/prototypal-inheritance
JS Native Prototypeshttps://www.w3docs.com/learn-javascript/native-prototypes
JS Prototype Methods, Objects Without `__proto__`https://www.w3docs.com/learn-javascript/prototype-methods-objects-without-proto
JS Class Basic Syntaxhttps://www.w3docs.com/learn-javascript/class-basic-syntax
JS Class inheritancehttps://www.w3docs.com/learn-javascript/class-inheritance
JS Static properties and methodshttps://www.w3docs.com/learn-javascript/static-properties-and-methods
JS Private and Protected Propertieshttps://www.w3docs.com/learn-javascript/private-and-protected-properties-and-methods
JS Extending Built-in Classeshttps://www.w3docs.com/learn-javascript/extending-built-in-classes
JS Class Checking: “instanceof”https://www.w3docs.com/learn-javascript/class-checking-instanceof
JS Mixinshttps://www.w3docs.com/learn-javascript/mixins
JS Error handling, "try..catch"https://www.w3docs.com/learn-javascript/error-handling-try-catch
JS Custom Errors, Extending Errorhttps://www.w3docs.com/learn-javascript/custom-errors-extending-error
JS Introduction:callbackshttps://www.w3docs.com/learn-javascript/introduction-callbacks
JS Promisehttps://www.w3docs.com/learn-javascript/promise
JS Promise Chaininghttps://www.w3docs.com/learn-javascript/promises-chaining
JS Error handling with promiseshttps://www.w3docs.com/learn-javascript/error-handling-with-promises
Promise APIhttps://www.w3docs.com/learn-javascript/promise-api
Promisificationhttps://www.w3docs.com/learn-javascript/promisification
Microtaskshttps://www.w3docs.com/learn-javascript/microtasks
async/awaithttps://www.w3docs.com/learn-javascript/async-await
Generatorshttps://www.w3docs.com/learn-javascript/generators
Async Iterators and Generatorshttps://www.w3docs.com/learn-javascript/async-iterators-and-generators
Moduleshttps://www.w3docs.com/learn-javascript/modules-introduction
Export and Importhttps://www.w3docs.com/learn-javascript/export-and-import
Dynamic Importshttps://www.w3docs.com/learn-javascript/dynamic-imports
Proxy and Reflecthttps://www.w3docs.com/learn-javascript/proxy-and-reflect
Evalhttps://www.w3docs.com/learn-javascript/eval-run-a-code-string
Curryinghttps://www.w3docs.com/learn-javascript/currying
BigInthttps://www.w3docs.com/learn-javascript/bigint
JS Polyfills & Transpilershttps://www.w3docs.com/learn-javascript/polyfills-and-transpilers
Popups and Window Methodshttps://www.w3docs.com/learn-javascript/popups-and-window-methods
Cross-window Communicationhttps://www.w3docs.com/learn-javascript/cross-window-communication
ArrayBuffer, Binary Arrayshttps://www.w3docs.com/learn-javascript/arraybuffer-binary-arrays
TextDecoder and TextEncoderhttps://www.w3docs.com/learn-javascript/textdecoder-and-textencoder
Blobhttps://www.w3docs.com/learn-javascript/javascript-blob
File and FileReaderhttps://www.w3docs.com/learn-javascript/file-and-filereader
JS Streams APIhttps://www.w3docs.com/learn-javascript/streams-api
Browser Environment, Specshttps://www.w3docs.com/learn-javascript/browser-environment-specs
Searching: getElement*, querySelector*https://www.w3docs.com/learn-javascript/searching-getelement-queryselector
Node Properties: Type, Tag and Contentshttps://www.w3docs.com/learn-javascript/node-properties-type-tag-and-contents
Attributes and Propertieshttps://www.w3docs.com/learn-javascript/attributes-and-properties
Modifying the documenthttps://www.w3docs.com/learn-javascript/modifying-the-document
Styles and Classeshttps://www.w3docs.com/learn-javascript/styles-and-classes
Window Sizes and Scrollinghttps://www.w3docs.com/learn-javascript/javascript-window-sizes-and-scrolling
Coordinateshttps://www.w3docs.com/learn-javascript/javascript-coordinates
JavaScript Introduction to Browser Eventshttps://www.w3docs.com/learn-javascript/introduction-to-browser-events
Bubbling and Capturinghttps://www.w3docs.com/learn-javascript/bubbling-and-capturing
Event Delegationhttps://www.w3docs.com/learn-javascript/javascript-events
Browser Default Actionshttps://www.w3docs.com/learn-javascript/browser-default-actions
Dispatching Custom Eventshttps://www.w3docs.com/learn-javascript/dispatching-custom-events
Mouse Events Basicshttps://www.w3docs.com/learn-javascript/mouse-events-basics
Moving the mousehttps://www.w3docs.com/learn-javascript/moving-the-mouse-mouseover-out-mouseenter-leave
Drag and Drophttps://www.w3docs.com/learn-javascript/drag-and-drop-with-javascript
Keyboard: keydown and keyuphttps://www.w3docs.com/learn-javascript/keyboard-keydown-and-keyup
Scrollinghttps://www.w3docs.com/learn-javascript/javascript-scrolling
Form Properties and Methodshttps://www.w3docs.com/learn-javascript/form-properties-and-methods
Focusing: focus/blurhttps://www.w3docs.com/learn-javascript/focusing-focus-blur
Events: change, input, cut, copy, pastehttps://www.w3docs.com/learn-javascript/events-change-input-cut-copy-paste
JS Clipboard APIhttps://www.w3docs.com/learn-javascript/clipboard-api
Forms: event and method submithttps://www.w3docs.com/learn-javascript/forms-event-and-method-submit
Page:DOMContentLoaded, load, beforeunload, unloadhttps://www.w3docs.com/learn-javascript/page-domcontentloaded-load-beforeunload-unload
Scripts: async, deferhttps://www.w3docs.com/learn-javascript/scripts-async-defer
Resource Loading: onload and onerrorhttps://www.w3docs.com/learn-javascript/resource-loading-onload-and-onerror
Mutation Observerhttps://www.w3docs.com/learn-javascript/mutation-observer
JS IntersectionObserverhttps://www.w3docs.com/learn-javascript/intersection-observer
JS ResizeObserverhttps://www.w3docs.com/learn-javascript/resize-observer
Selection and Rangehttps://www.w3docs.com/learn-javascript/selection-and-range
Event Loop: microtasks and macrotaskshttps://www.w3docs.com/learn-javascript/event-loop-microtasks-and-macrotasks
Canvashttps://www.w3docs.com/learn-javascript/canvas
Fetch APIhttps://www.w3docs.com/learn-javascript/fetch-api
FormDatahttps://www.w3docs.com/learn-javascript/javascript-formdata
Fetch: download progresshttps://www.w3docs.com/learn-javascript/fetch-download-progress
Fetch: aborthttps://www.w3docs.com/learn-javascript/fetch-abort
Fetch: cross-origin requestshttps://www.w3docs.com/learn-javascript/javascript-fetch-cross-origin-requests
URL Objectshttps://www.w3docs.com/learn-javascript/url-objects
XMLHttpRequesthttps://www.w3docs.com/learn-javascript/xmlhttprequest
JS Server-Sent Eventshttps://www.w3docs.com/learn-javascript/server-sent-events
Resumable File Uploadhttps://www.w3docs.com/learn-javascript/resumable-file-upload
Cookies: document.cookiehttps://www.w3docs.com/learn-javascript/cookies-document-cookie
LocalStorage, SessionStoragehttps://www.w3docs.com/learn-javascript/localstorage-sessionstorage
IndexedDBhttps://www.w3docs.com/learn-javascript/javascript-indexeddb
CSS animationshttps://www.w3docs.com/learn-javascript/css-animations
JavaScript Animationshttps://www.w3docs.com/learn-javascript/javascript-animations
Web Componentshttps://www.w3docs.com/learn-javascript/web-components
Custom Elementshttps://www.w3docs.com/learn-javascript/custom-elements
Shadow DOMhttps://www.w3docs.com/learn-javascript/javascript-shadow-dom
Template Elementhttps://www.w3docs.com/learn-javascript/template-element
Shadow DOM Slots, Compositionhttps://www.w3docs.com/learn-javascript/shadow-dom-slots-composition
Shadow DOM Stylinghttps://www.w3docs.com/learn-javascript/shadow-dom-styling
Shadow DOM and Eventshttps://www.w3docs.com/learn-javascript/shadow-dom-and-events
JS Regexhttps://www.w3docs.com/learn-javascript/regex
Patterns and Flagshttps://www.w3docs.com/learn-javascript/patterns-and-flags
Character Classeshttps://www.w3docs.com/learn-javascript/character-classes
Unicode: flag "u" and class \p{...}https://www.w3docs.com/learn-javascript/unicode-flag-u-and-class-p
Anchors: string start ^ and end $https://www.w3docs.com/learn-javascript/anchors-string-start-and-end
Multiline Mode of Anchors ^ $, Flag "m"https://www.w3docs.com/learn-javascript/multiline-mode-of-anchors-flag-m
Word Boundary: \bhttps://www.w3docs.com/learn-javascript/word-boundary-b
Escaping, Special Charactershttps://www.w3docs.com/learn-javascript/escaping-special-characters
Sets and ranges [...]https://www.w3docs.com/learn-javascript/javascript-sets-and-ranges
Quantifiers +, *, ? and {n}https://www.w3docs.com/learn-javascript/quantifiers-and-n
Greedy and Lazy Quantifiershttps://www.w3docs.com/learn-javascript/greedy-and-lazy-quantifiers
Capturing Groupshttps://www.w3docs.com/learn-javascript/capturing-groups
Backreferences in pattern: \n and \khttps://www.w3docs.com/learn-javascript/backreferences-in-pattern-n-and-k-name
JavaScript Alternation (OR)https://www.w3docs.com/learn-javascript/javascript-alternation-or
Lookahead and Lookbehindhttps://www.w3docs.com/learn-javascript/lookahead-and-lookbehind
Catastrophic Backtrackinghttps://www.w3docs.com/learn-javascript/catastrophic-backtracking
Sticky flag "y", searching at positionhttps://www.w3docs.com/learn-javascript/sticky-flag-y-searching-at-position
Methods of RegExp and Stringhttps://www.w3docs.com/learn-javascript/javascript-regexp
Web Animations APIhttps://www.w3docs.com/learn-javascript/animations-api
File APIhttps://www.w3docs.com/learn-javascript/file-api
Battery APIhttps://www.w3docs.com/learn-javascript/battery-api
WebGLhttps://www.w3docs.com/learn-javascript/webgl
Push APIhttps://www.w3docs.com/learn-javascript/push-api
Screen Orientation APIhttps://www.w3docs.com/learn-javascript/screen-orientation-api
History APIhttps://www.w3docs.com/learn-javascript/history-api
Console APIhttps://www.w3docs.com/learn-javascript/console-api
Fullscreen APIhttps://www.w3docs.com/learn-javascript/fullscreen-api
Validation APIhttps://www.w3docs.com/learn-javascript/validation-api
Web Storage APIhttps://www.w3docs.com/learn-javascript/storage-api
Web MIDI APIhttps://www.w3docs.com/learn-javascript/web-midi-api
JS Web Workershttps://www.w3docs.com/learn-javascript/web-workers
Service Workershttps://www.w3docs.com/learn-javascript/service-workers
WebSocketshttps://www.w3docs.com/learn-javascript/websockets
Geolocationhttps://www.w3docs.com/learn-javascript/geolocation
WebRTChttps://www.w3docs.com/learn-javascript/webrtc
Web Audio APIhttps://www.w3docs.com/learn-javascript/web-audio-api
Notifications APIhttps://www.w3docs.com/learn-javascript/notifications-api
The Vibration APIhttps://www.w3docs.com/learn-javascript/the-vibration-api
JS Intl APIhttps://www.w3docs.com/learn-javascript/intl-api
CSS animationshttps://www.w3docs.com/learn-javascript/css-animations
setInterval and setTimeouthttps://www.w3docs.com/learn-javascript/scheduling-settimeout-and-setinterval
Try it Yourself »https://www.w3docs.com/tools/editor#code=PCFET0NUWVBFIGh0bWw-CjxodG1sPgo8aGVhZD4KICA8c3R5bGU-CiAgICAjc3F1YXJlIHsKICAgICAgd2lkdGg6IDUwcHg7CiAgICAgIGhlaWdodDogNTBweDsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogcmVkOwogICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgIGxlZnQ6IDA7CiAgICAgIHRvcDogNTBweDsKICAgIH0KICA8L3N0eWxlPgo8L2hlYWQ-Cjxib2R5PgogIDxkaXYgaWQ9InNxdWFyZSI-PC9kaXY-CiAgPHNjcmlwdD4KICAgIGNvbnN0IHNxdWFyZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdzcXVhcmUnKTsKICAgIGxldCBwb3MgPSAwOwoKICAgIGZ1bmN0aW9uIG1vdmUoKSB7CiAgICAgIGlmIChwb3MgPCB3aW5kb3cuaW5uZXJXaWR0aCAtIDUwKSB7CiAgICAgICAgcG9zICs9IDI7CiAgICAgICAgc3F1YXJlLnN0eWxlLnRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKCcgKyBwb3MgKyAncHgpJzsKICAgICAgICByZXF1ZXN0QW5pbWF0aW9uRnJhbWUobW92ZSk7CiAgICAgIH0KICAgIH0KCiAgICBtb3ZlKCk7CiAgPC9zY3JpcHQ-CjwvYm9keT4KPC9odG1sPg&lang=html
Try it Yourself »https://www.w3docs.com/tools/editor#code=PCFET0NUWVBFIGh0bWw-CjxodG1sPgo8aGVhZD4KICA8c3R5bGU-CiAgICAjc3F1YXJlIHsKICAgICAgd2lkdGg6IDUwcHg7CiAgICAgIGhlaWdodDogNTBweDsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogYmx1ZTsKICAgICAgcG9zaXRpb246IGFic29sdXRlOwogICAgICBsZWZ0OiAwOwogICAgICB0b3A6IDUwcHg7CiAgICB9CiAgPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KICA8ZGl2IGlkPSJzcXVhcmUiPjwvZGl2PgogIDxzY3JpcHQ-CiAgICBjb25zdCBzcXVhcmUgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnc3F1YXJlJyk7CiAgICBsZXQgc3RhcnQgPSBudWxsOwogICAgY29uc3QgZHVyYXRpb24gPSAyMDAwOyAvLyBBbmltYXRpb24gZHVyYXRpb24gaW4gbWlsbGlzZWNvbmRzCgogICAgZnVuY3Rpb24gZWFzZU91dFF1YWQodCkgewogICAgICByZXR1cm4gdCAqICgyIC0gdCk7CiAgICB9CgogICAgZnVuY3Rpb24gYW5pbWF0ZSh0aW1lc3RhbXApIHsKICAgICAgaWYgKCFzdGFydCkgc3RhcnQgPSB0aW1lc3RhbXA7CiAgICAgIGxldCBlbGFwc2VkID0gdGltZXN0YW1wIC0gc3RhcnQ7CiAgICAgIGxldCBwcm9ncmVzcyA9IE1hdGgubWluKGVsYXBzZWQgLyBkdXJhdGlvbiwgMSk7CiAgICAgIGxldCBlYXNlZFByb2dyZXNzID0gZWFzZU91dFF1YWQocHJvZ3Jlc3MpOwoKICAgICAgc3F1YXJlLnN0eWxlLnRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKCcgKyAod2luZG93LmlubmVyV2lkdGggLSA1MCkgKiBlYXNlZFByb2dyZXNzICsgJ3B4KSc7CgogICAgICBpZiAocHJvZ3Jlc3MgPCAxKSB7CiAgICAgICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKGFuaW1hdGUpOwogICAgICB9CiAgICB9CgogICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKGFuaW1hdGUpOwogIDwvc2NyaXB0Pgo8L2JvZHk-CjwvaHRtbD4&lang=html
Try it Yourself »https://www.w3docs.com/tools/editor#code=PCFET0NUWVBFIGh0bWw-CjxodG1sPgo8aGVhZD4KICA8c3R5bGU-CiAgICAjc3F1YXJlIHsKICAgICAgd2lkdGg6IDUwcHg7CiAgICAgIGhlaWdodDogNTBweDsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogZ3JlZW47CiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICAgICAgbGVmdDogMDsKICAgICAgdG9wOiAwOwogICAgfQogIDwvc3R5bGU-CjwvaGVhZD4KPGJvZHk-CiAgPGRpdiBpZD0ic3F1YXJlIj48L2Rpdj4KICA8c2NyaXB0PgogICAgY29uc3Qgc3F1YXJlID0gZG9jdW1lbnQuZ2V0RWxlbWVudEJ5SWQoJ3NxdWFyZScpOwogICAgbGV0IHhQb3MgPSAwOwogICAgbGV0IHlQb3MgPSAwOwoKICAgIGZ1bmN0aW9uIG1vdmVSaWdodCgpIHsKICAgICAgaWYgKHhQb3MgPCB3aW5kb3cuaW5uZXJXaWR0aCAtIDUwKSB7CiAgICAgICAgeFBvcyArPSAyOwogICAgICAgIHNxdWFyZS5zdHlsZS50cmFuc2Zvcm0gPSAndHJhbnNsYXRlWCgnICsgeFBvcyArICdweCknOwogICAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZShtb3ZlUmlnaHQpOwogICAgICB9IGVsc2UgewogICAgICAgIHhQb3MgPSAwOwogICAgICAgIHlQb3MgPSAwOyAvLyBFeHBsaWNpdGx5IHJlc2V0IHlQb3MgYmVmb3JlIGRvd253YXJkIHBoYXNlCiAgICAgICAgc3F1YXJlLnN0eWxlLnRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKDBweCknOwogICAgICAgIHJlcXVlc3RBbmltYXRpb25GcmFtZShtb3ZlRG93bik7CiAgICAgIH0KICAgIH0KCiAgICBmdW5jdGlvbiBtb3ZlRG93bigpIHsKICAgICAgaWYgKHlQb3MgPCB3aW5kb3cuaW5uZXJIZWlnaHQgLSA1MCkgewogICAgICAgIHlQb3MgKz0gMjsKICAgICAgICBzcXVhcmUuc3R5bGUudHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVkoJyArIHlQb3MgKyAncHgpJzsKICAgICAgICByZXF1ZXN0QW5pbWF0aW9uRnJhbWUobW92ZURvd24pOwogICAgICB9IGVsc2UgewogICAgICAgIHlQb3MgPSAwOyAvLyBSZXNldCBmb3IgcmVwZWF0ZWQgY3ljbGVzCiAgICAgICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKG1vdmVSaWdodCk7CiAgICAgIH0KICAgIH0KCiAgICBtb3ZlUmlnaHQoKTsKICA8L3NjcmlwdD4KPC9ib2R5Pgo8L2h0bWw-&lang=html
Try it Yourself »https://www.w3docs.com/tools/editor#code=PCFET0NUWVBFIGh0bWw-CjxodG1sPgo8aGVhZD4KICA8c3R5bGU-CiAgICAjc3F1YXJlIHsKICAgICAgd2lkdGg6IDUwcHg7CiAgICAgIGhlaWdodDogNTBweDsKICAgICAgYmFja2dyb3VuZC1jb2xvcjogcHVycGxlOwogICAgICBwb3NpdGlvbjogYWJzb2x1dGU7CiAgICAgIGxlZnQ6IDA7CiAgICAgIHRvcDogMDsKICAgIH0KICA8L3N0eWxlPgo8L2hlYWQ-Cjxib2R5PgogIDxkaXYgaWQ9InNxdWFyZSI-PC9kaXY-CiAgPHNjcmlwdD4KICAgIGNvbnN0IHNxdWFyZSA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdzcXVhcmUnKTsKICAgIGxldCBwb3MgPSAwOwoKICAgIGZ1bmN0aW9uIGNoYW5nZUNvbG9yKHByb2dyZXNzKSB7CiAgICAgIGxldCByZWQgPSBNYXRoLmZsb29yKDI1NSAqIHByb2dyZXNzKTsKICAgICAgbGV0IGdyZWVuID0gTWF0aC5mbG9vcigyNTUgKiAoMSAtIHByb2dyZXNzKSk7CiAgICAgIHJldHVybiBgcmdiKCR7cmVkfSwgJHtncmVlbn0sIDApYDsKICAgIH0KCiAgICBmdW5jdGlvbiBhbmltYXRlKCkgewogICAgICBpZiAocG9zIDwgd2luZG93LmlubmVyV2lkdGggLSA1MCkgewogICAgICAgIHBvcyArPSAyOwogICAgICAgIGxldCBwcm9ncmVzcyA9IHBvcyAvICh3aW5kb3cuaW5uZXJXaWR0aCAtIDUwKTsKICAgICAgICBzcXVhcmUuc3R5bGUudHJhbnNmb3JtID0gJ3RyYW5zbGF0ZVgoJyArIHBvcyArICdweCknOwogICAgICAgIHNxdWFyZS5zdHlsZS5iYWNrZ3JvdW5kQ29sb3IgPSBjaGFuZ2VDb2xvcihwcm9ncmVzcyk7CiAgICAgICAgcmVxdWVzdEFuaW1hdGlvbkZyYW1lKGFuaW1hdGUpOwogICAgICB9CiAgICB9CgogICAgYW5pbWF0ZSgpOwogIDwvc2NyaXB0Pgo8L2JvZHk-CjwvaHRtbD4&lang=html
Animationhttps://developer.mozilla.org/en-US/docs/Web/API/Animation
CSS animationshttps://www.w3docs.com/learn-javascript/css-animations
CSS animationshttps://www.w3docs.com/learn-javascript/css-animations
Scheduling: setTimeout and setIntervalhttps://www.w3docs.com/learn-javascript/scheduling-settimeout-and-setinterval
Introduction to browser eventshttps://www.w3docs.com/learn-javascript/introduction-to-browser-events
JavaScript HTML DOMhttps://www.w3docs.com/learn-javascript/javascript-html-dom
← PreviousCSS animationshttps://www.w3docs.com/learn-javascript/css-animations
Next →Web Componentshttps://www.w3docs.com/learn-javascript/web-components
Introduction to JavaScript Animationshttps://www.w3docs.com/learn-javascript/javascript-animations#introduction-to-javascript-animations
Basic Concepts of JavaScript Animationshttps://www.w3docs.com/learn-javascript/javascript-animations#basic-concepts-of-javascript-animations
Simple JavaScript Animation Examplehttps://www.w3docs.com/learn-javascript/javascript-animations#simple-javascript-animation-example
Advanced Techniques in JavaScript Animationshttps://www.w3docs.com/learn-javascript/javascript-animations#advanced-techniques-in-javascript-animations
The Web Animations APIhttps://www.w3docs.com/learn-javascript/javascript-animations#the-web-animations-api
Stopping and Reversing Animationshttps://www.w3docs.com/learn-javascript/javascript-animations#stopping-and-reversing-animations
Accessibility: Respect Reduced Motionhttps://www.w3docs.com/learn-javascript/javascript-animations#accessibility-respect-reduced-motion
Performance Optimization for JavaScript Animationshttps://www.w3docs.com/learn-javascript/javascript-animations#performance-optimization-for-javascript-animations
Conclusionhttps://www.w3docs.com/learn-javascript/javascript-animations#conclusion
Practicehttps://www.w3docs.com/learn-javascript/javascript-animations#practice
https://x.com/w3docs
https://github.com/w3docs
https://linkedin.com/company/w3docs
Learn HTMLhttps://www.w3docs.com/learn-html
Learn CSShttps://www.w3docs.com/learn-css
Learn JavaScripthttps://www.w3docs.com/learn-javascript
Learn Githttps://www.w3docs.com/learn-git
Learn Javahttps://www.w3docs.com/learn-java
Learn PHPhttps://www.w3docs.com/learn-php
Learn Pythonhttps://www.w3docs.com/learn-python
Exerciseshttps://www.w3docs.com/exercise
Quizzeshttps://www.w3docs.com/quiz
Snippetshttps://www.w3docs.com/snippets
Snippet tagshttps://www.w3docs.com/snippets-tags
Try-it editorhttps://www.w3docs.com/tools/editor
HTML Editorhttps://www.w3docs.com/tools/editor
Password Generatorhttps://www.w3docs.com/tools/password-generator
HTML Encoderhttps://www.w3docs.com/tools/html-encoder
Code Diffhttps://www.w3docs.com/tools/code-diff
JSON Beautifierhttps://www.w3docs.com/tools/json-beautify
Abouthttps://www.w3docs.com/about
Contacthttps://www.w3docs.com/contact
Privacy Policyhttps://www.w3docs.com/privacy
Englishhttps://www.w3docs.com/learn-javascript/javascript-animations
Deutschhttps://de.w3docs.com/learn-javascript/javascript-animations
Русскийhttps://ru.w3docs.com/learn-javascript/javascript-animations
Françaishttps://fr.w3docs.com/learn-javascript/javascript-animations
Españolhttps://es.w3docs.com/learn-javascript/javascript-animations
Portuguêshttps://pt.w3docs.com/learn-javascript/javascript-animations
Italianohttps://it.w3docs.com/learn-javascript/javascript-animations

Viewport: width=device-width, initial-scale=1

URLs of crawlers that visited me.