In September 1995, native support for Compuserve's GIF file format was added
Browsers | CSS | Javascript
A new JS framework was released, helping "webmasters" of the time to add effects and animations to their web pages
var element =
document.getElementById("animate");
Effect.fade(element);
Appeared in a nightly build of webkit, and demonstrated on the webkit blog in 2009 (https://webkit.org/blog/324/css-animation-2/).
In 2010 it was build into Chrome
In 2012 in all major browsers
@keyframes bounce {
from {
left: 0px;
}
to {
left: 200px;
}
}
FIREFOX | CHROME | OPERA | ANDROID
FIREFOX | SAFARI
Unofficial
let animationObject =
element.animate( KeyframesFormat , Duration | options )
Animates an element's style property
using an array of values
element.animate( KeyframesFormat,
options )
KeyframesFormat = {
Property: [value, value, ...],
Property: [value, value, ...],
...
}
el.animate({ opacity: [0,1] }, 300);
Animates an element
Using a new set of style declarations for each keyframe
element.animate( KeyframesFormat,
options )
KeyframesFormat = [
{
Property: value,
Property: value,
offset: Percentage,
easing: EasingFunction
},
...
]
el.animate([{opacity:0}, {opacity:1}], 300);
Allows us to control how the animation is played on the element
el.animate({opacity: [0,1]}, options);
let options = {
delay: ms,
duration: ms,
endDelay: ms,
direction: AnimationDirection,
easing: EasingFunction,
fill: AnimationFill,
iterations: 1...Infinity,
iterationStart: Percentage
}
Properties and methods of the created animation
Allows us to modify existing animations
Properties:
let animation =
el.animate({opacity: [0,1]}, 300);
animation.currentTime
// Gets the current time of
// the animation
animation.effect
// Gets/sets the keyframes and
// timing of the animation
animation.playState
// Gets/sets the animation state:
// idle | pending |
// running | paused | finished
animation.startTime
// Gets/sets the animation starting time
animation.playbackRate
// Gets/sets the playback rate
Properties and methods of the created animation
Allows us to modify existing animations
Methods:
let animation =
el.animate({opacity: [0,1]}, 300);
animation.cancel()
// Cancels the animation
animation.finish()
// Finishes the animation immediately
animation.pause()
// Pauses the animation
animation.play()
// Plays/resumes the animation
animation.reverse()
// Reverses the animation
Properties and methods of the created animation
Allows us to modify existing animations
Events/Promises:
let animation =
el.animate({opacity: [0,1]}, 300);
animation.oncancel = () => { ... }
// Fires when animation cancels
animation.onfinish = () => { ... }
// Fires when animation finishes
animation.ready.then( ()=> { ... } )
// Promise for when animation is ready to play
animation.finished.then( ()=> { ... } )
// Promise for when animation is finished
function animateMario(){
return Promise.resolve()
.then( goombaWalk.play )
.then( marioSprite.play)
.then( marioWalkIn )
.then( marioSprite.cancel )
.then( jumpSequenceStart )
.then( goombaWalk.pause )
.then( goombaSprite.cancel )
.then( jumpSequenceEnd )
.then( marioSprite.play )
.then( marioWalkOut )
}
animateMario()
.then(()=> { alert("Game over") });