Exemples d'animations

animation-firefox-logo

Contenu HTML

<div id="container">
<div class="channel">
  <img src="https://mdn.mozillademos.org/files/11829/nightly.png" class="channel-icon"/>
  <span class="channel-note">Firefox Nightly</span>
</div>

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

<div class="channel">
   <img src="https://mdn.mozillademos.org/files/11831/release.png" class="channel-icon"/>
   <span class="channel-note">Firefox Release</span>
</div>
</div>

Contenu CSS

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

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

.channel-icon {
  width: 50px;
  height: 50px;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: transform 0.5s ease-in, filter 0.5s 0.25s ease-in-out, -webkit-filter 0.5s 0.25s ease-in-out;
}

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

.channel-icon#selected {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  transform: scale(1.5);
}

.channel-icon#selected+span {
  opacity: 1;
  width: 300px;
  transition: opacity 0.75s ease-in, width 0.75s ease-in;
}

Contenu JavaScript

document.addEventListener("click", toggleSelection);

function toggleSelection(e) {
  if (e.button != 0) {
    return;
  }
  if (e.target.classList.contains("channel-icon")) {
    var wasSelected = (e.target.getAttribute("id") == "selected");
    clearSelection();
    if (!wasSelected) {
      e.target.setAttribute("id", "selected");
    }
  }
}

function clearSelection() {
  var selected = document.getElementById("selected");
  if (selected) {
    selected.removeAttribute("id");
  }
}