MDN wants to learn about developers like you:

Firefox Developer Tools

Animation inspector example: CSS transitions


Example animation using CSS transitions.

HTML Content

<div class="channel">
  <img src="" class="icon"/>
  <span class="note">Firefox Developer Edition</span>

CSS Content

.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%);
  transition: transform 750ms ease-in, filter 750ms ease-in-out;

.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 500ms 150ms, width 500ms 150ms;

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

.icon#selected+span {
  opacity: 1;
  width: 300px;

JavaScript Content

function toggleSelection(e) {
  if (e.button != 0) {
  if ("icon")) {
    var wasSelected = ("id") == "selected");
    if (!wasSelected) {"id", "selected");

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

document.addEventListener("click", toggleSelection);


Document Tags and Contributors

 Contributors to this page: wbamberg, Rezi
 Last updated by: wbamberg,