Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

Exemple d'inspecteur d'animations : Web Animations API

logo-animation-Firefox

Exemple d'animation utilisant la Web Animations API.

Contenu HTML

<div class="channel">
   <img src="https://mdn.mozillademos.org/files/11827/developer.png" id="icon"/>
   <span id="note">Firefox Developer Edition</span>
</div>

Contenu CSS

.channel {
  padding: 2em;
  margin: 0.5em;
  box-shadow: 1px 1px 5px #808080;
  margin: 1.5em;
}

.channel > * {
  vertical-align: middle;
  line-height: normal;
}

#icon {
  width: 50px;
  height: 50px;
  filter: grayscale(100%);
}

#note {
  margin-left: 1em;
  font: 1.5em "Open Sans",Arial,sans-serif;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  opacity: 0;
  width: 0;
}

Contenu JavaScript

var iconKeyframeSet = [
  { transform: 'scale(1)', filter: 'grayscale(100%)'},
  { filter:  'grayscale(100%)', offset: 0.333},
  { transform: 'scale(1.5)', offset: 0.666 },
  { transform: 'scale(1.5)', filter: 'grayscale(0%)'}
];

var noteKeyframeSet = [
  { opacity: '0', width: '0'},
  { opacity: '1', width: '300px'}
];

var iconKeyFrameOptions = {
  duration: 750,
  fill: 'forwards',
  easing: 'ease-in',
  endDelay: 100
}

var noteKeyFrameOptions = {
  duration: 500,
  fill: 'forwards',
  easing: 'ease-in',
  delay: 150
}

var icon = document.getElementById("icon");
var note = document.getElementById("note");

var iconKeyframes = new KeyframeEffect(
  icon,
  iconKeyframeSet,
  iconKeyFrameOptions
);

var noteKeyframes = new KeyframeEffect(
  note,
  noteKeyframeSet,
  noteKeyFrameOptions
);

var iconAnimation = new Animation(iconKeyframes, document.timeline);
var noteAnimation = new Animation(noteKeyframes, document.timeline);

var firstTime = true;

function animateChannel(e) {
  if (e.button != 0) {
    return;
  }
  if (e.target.id != "icon") {
    return;
  }
  if (firstTime) {
    iconAnimation.play();
    noteAnimation.play();
    firstTime = false;
  } else {
    iconAnimation.reverse();
    noteAnimation.reverse();
  }
}

document.addEventListener("click", animateChannel);

 

 

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : maximelore
 Dernière mise à jour par : maximelore,