 b7285592f9
			
		
	
	b7285592f9
	
	
	
		
			
			We were computing the wrong progress, in particular when the iteration count was non-integer. Test included.
		
			
				
	
	
		
			84 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			84 lines
		
	
	
		
			1.1 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| @keyframes cssrocks {
 | |
|   from { background-color: yellow; }
 | |
|   to   { background-color: red; }
 | |
| }
 | |
| 
 | |
| box {
 | |
|   background-color: blue;
 | |
|   animation-fill-mode: both;
 | |
|   animation-duration: 100s;
 | |
|   padding: 1px;
 | |
|   background-clip: content-box;
 | |
|   animation-timing-function: linear;
 | |
| }
 | |
| 
 | |
| .after {
 | |
|   animation-name: cssrocks;
 | |
|   animation-delay: -10000s;
 | |
| }
 | |
| 
 | |
| .before {
 | |
|   animation-name: cssrocks;
 | |
|   animation-delay: 10000s;
 | |
| }
 | |
| 
 | |
| .normal {
 | |
|   animation-direction: normal;
 | |
| }
 | |
| 
 | |
| .reverse {
 | |
|   animation-direction: reverse;
 | |
| }
 | |
| 
 | |
| .alternate {
 | |
|   animation-direction: alternate;
 | |
| }
 | |
| 
 | |
| .alternate-reverse {
 | |
|   animation-direction: alternate-reverse;
 | |
| }
 | |
| 
 | |
| .x0 {
 | |
|   animation-iteration-count: 0;
 | |
| }
 | |
| 
 | |
| .x02 {
 | |
|   animation-iteration-count: 0.2;
 | |
| }
 | |
| 
 | |
| .x1 {
 | |
|   animation-iteration-count: 1;
 | |
| }
 | |
| 
 | |
| .x12 {
 | |
|   animation-iteration-count: 1.2;
 | |
| }
 | |
| 
 | |
| .x2 {
 | |
|   animation-iteration-count: 2;
 | |
| }
 | |
| 
 | |
| .x22 {
 | |
|   animation-iteration-count: 2.2;
 | |
| }
 | |
| 
 | |
| .yellow {
 | |
|   animation: none;
 | |
|   background-color: yellow;
 | |
| }
 | |
| 
 | |
| .red {
 | |
|   animation: none;
 | |
|   background-color: red;
 | |
| }
 | |
| 
 | |
| .darkorange {
 | |
|   animation: none;
 | |
|   background-color: rgb(255,51,0);
 | |
| }
 | |
| 
 | |
| .lightorange {
 | |
|   animation: none;
 | |
|   background-color: rgb(255,204,0);
 | |
| }
 |