---
source: crates/biome_formatter_test/src/snapshot_builder.rs
info: css/atrule/keyframes.css
---

# Input

```css
@keyframes identifier {
    0% {
      top: 0;
      left: 0;
    }
    30% {
      top: 50px;
    }
    68%,
    72% {
      left: 50px;
    }
    100% {
      top: 100px;
      left: 100%;
    }
  }
  @keyframes identifier {
  0%{top:0;left:0;}
  30%{top: 50px;}
  68%,72%{left: 50px;}
  100%{top: 100px; left: 100%;}
  }
  @keyframes identifier{
      0% {
          top:0;
          left:0;
      }
      30% {
          top: 50px;
      }
      68%, 72% {
          left: 50px;
      }
      100% {
          top: 100px;
          left: 100%;
      }
  }
  @keyframes  identifier  {
      0% {
          top:0;
          left:0;
      }
      30% {
          top: 50px;
      }
      68%, 72% {
          left: 50px;
      }
      100% {
          top: 100px;
          left: 100%;
      }
  }
  @keyframes
  identifier
  {
  0%
  {
  top
  :
  0;
  left
  :
  0
  ;
  }
  30%
  {
  top
  :
  50px
  ;
  }
  68%
  ,
  72%
  {
  left
  :
  50px
  ;
  }
  100%
  {
  top
  :
  100px
  ;
  left
  :
  100%
  ;
  }
  }
  @keyframes
  
  identifier
  
  {
  
  0%
  
  {
  
  top
  
  :
  
  0
  
  ;
  
  left
  
  :
  
  0
  
  ;
  
  }
  
  30%
  
  {
  
  top
  
  :
  
  50px
  
  ;
  
  }
  
  68%
  
  ,
  
  72%
  
  {
  
  left
  
  :
  
  50px
  
  ;
  
  }
  
  100%
  
  {
  
  top
  
  :
  
  100px
  
  ;
  
  left
  
  :
  
  100%
  
  ;
  
  }
  
  }
  @keyframes identifier {
    from {
      margin-top: 50px;
    }
    to {
      margin-top: 100px;
    }
  }
  @keyframes
  identifier
  {
  from
  {
  margin-top: 50px;
  }
  to
  {
  margin-top: 100px;
  }
  }
  @keyframes
  
  identifier
  
  {
  
  from
  
  {
  
  margin-top: 50px;
  
  }
  
  to
  
  {
  
  margin-top: 100px;
  
  }
  
  }
  @-webkit-keyframes identifier {
    0%   { opacity: 0; top: 4rem; }
    100% { opacity: 1; top: 0; }
  }
```


=============================

# Outputs

## Output 1

-----
Indent style: Tab
Indent width: 2
Line ending: LF
Line width: 80
Quote style: Double Quotes
-----

```css
@keyframes identifier {
	0% {
		top: 0;
		left: 0;
	}
	30% {
		top: 50px;
	}
	68%,
	72% {
		left: 50px;
	}
	100% {
		top: 100px;
		left: 100%;
	}
}
@keyframes identifier {
	0% {
		top: 0;
		left: 0;
	}
	30% {
		top: 50px;
	}
	68%,
	72% {
		left: 50px;
	}
	100% {
		top: 100px;
		left: 100%;
	}
}
@keyframes identifier {
	0% {
		top: 0;
		left: 0;
	}
	30% {
		top: 50px;
	}
	68%,
	72% {
		left: 50px;
	}
	100% {
		top: 100px;
		left: 100%;
	}
}
@keyframes identifier {
	0% {
		top: 0;
		left: 0;
	}
	30% {
		top: 50px;
	}
	68%,
	72% {
		left: 50px;
	}
	100% {
		top: 100px;
		left: 100%;
	}
}
@keyframes identifier {
	0% {
		top: 0;
		left: 0;
	}
	30% {
		top: 50px;
	}
	68%,
	72% {
		left: 50px;
	}
	100% {
		top: 100px;
		left: 100%;
	}
}
@keyframes identifier {
	0% {
		top: 0;

		left: 0;
	}

	30% {
		top: 50px;
	}

	68%,
	72% {
		left: 50px;
	}

	100% {
		top: 100px;

		left: 100%;
	}
}
@keyframes identifier {
	from {
		margin-top: 50px;
	}
	to {
		margin-top: 100px;
	}
}
@keyframes identifier {
	from {
		margin-top: 50px;
	}
	to {
		margin-top: 100px;
	}
}
@keyframes identifier {
	from {
		margin-top: 50px;
	}

	to {
		margin-top: 100px;
	}
}
@-webkit-keyframes identifier {
	0% {
		opacity: 0;
		top: 4rem;
	}
	100% {
		opacity: 1;
		top: 0;
	}
}
```