<commit_before>@-webkit-keyframes corner-original {
  0%   { 
  	width: 100%;
  }
  100% {
  	width: calc(100% - 40px);
  }
}

@-webkit-keyframes stripe-original {
  0%   { 
  	width: calc(100% - 40px);
  }
  100% {
  	width: 0;
  }
}

@-webkit-keyframes corner-undercorner {
  0%   { 
  	height: 40px;
  }
  100% {
  	height: 0;
  }
}

@-webkit-keyframes corner-back {
  0%   { 
  	width: 0;
  	height: 0;
  }
  100% {
  	width: 40px;
  	height: 40px;
  }
}

@-webkit-keyframes stripe-back {
  0%   { 
  	right: 0;
  	width: 40px;
  	height: 40px;
  	background-position: 0 0;
  }
  100% {
  	right: 460px;
	width: 40px;
	height: 880px;
	background-position: 0 -420px;
  }
}

@-webkit-keyframes stripe-shadow {
  0%   { 
  	height: 40px;
  }
  100% {
  	height: 460px;
  }
}

@-webkit-keyframes stripe-end {
  0%   { 
  	right: 460px;
  	top: 0;
  	background-position: 0 -420px;
  	opacity: 1;
  }
  100% {
	background-position: 0 -460px;
	right: 600px;
	top: 100px;
	opacity: 0;
  }
}


html {
	background: steelblue;
}

.container {
	width: 500px;
	margin: 100px auto;
}

.stripe {
	position: relative;
	height: 40px;
}

.original {
	position: relative;
	z-index: 1;
	background: #ccc;
	height: 40px;
	width: 100%;
}

.undercorner {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	height: 40px;
	background: #ccc;
}


.back {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 0;
	height: 0;
	background: 
		linear-gradient(
			224deg, 
			transparent, 
			transparent 45%, 
			transparent 50%, 
			#555 50%, 
			#666 56%, 
			#777 62%, 
			#888 80%,
			#999 100%
		);
}


.back:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 0;
	height: 0;
	box-shadow : -5px 5px 10px -4px rgba(0, 0, 0, .8);
}

.stripe:hover .original {
	-webkit-animation: 	corner-original 1s 1 forwards ease-in, 
						stripe-original 8.8s 1 forwards cubic-bezier(.88,.87,.74,.49);
	-webkit-animation-delay: 0s, 1s;
}

.stripe:hover .undercorner {
	-webkit-animation: 	corner-undercorner 1s 1 forwards ease-in;
}

.stripe:hover .back {
	-webkit-animation: 	corner-back 1s 1 forwards ease-in, 
						stripe-back 8.8s 1 forwards cubic-bezier(.88,.87,.74,.49), 
						stripe-end 0.2s 1 forwards ease-out;	
	-webkit-animation-delay: 0s, 1s, 9.8s;
}

.stripe:hover .back:after {
	-webkit-animation: 	corner-back 1s 1 forwards ease-in, 
						stripe-shadow 8.8s 1 forwards cubic-bezier(.88,.87,.74,.49);	
	-webkit-animation-delay: 0s, 1s;
}

/*
.stripe:hover .back {
	right: 460px;
	width: 40px;
	height: 880px;
	background-position: 0 -420px;
	transition: all 10s linear;
}

.stripe:hover .back:after {
	height: 460px;
	transition: all 10s linear;
}*/<commit_msg>remove old styles<commit_after>@-webkit-keyframes corner-original {
  0%   { 
  	width: 100%;
  }
  100% {
  	width: calc(100% - 40px);
  }
}

@-webkit-keyframes stripe-original {
  0%   { 
  	width: calc(100% - 40px);
  }
  100% {
  	width: 0;
  }
}

@-webkit-keyframes corner-undercorner {
  0%   { 
  	height: 40px;
  }
  100% {
  	height: 0;
  }
}

@-webkit-keyframes corner-back {
  0%   { 
  	width: 0;
  	height: 0;
  }
  100% {
  	width: 40px;
  	height: 40px;
  }
}

@-webkit-keyframes stripe-back {
  0%   { 
  	right: 0;
  	width: 40px;
  	height: 40px;
  	background-position: 0 0;
  }
  100% {
  	right: 460px;
	width: 40px;
	height: 880px;
	background-position: 0 -420px;
  }
}

@-webkit-keyframes stripe-shadow {
  0%   { 
  	height: 40px;
  }
  100% {
  	height: 460px;
  }
}

@-webkit-keyframes stripe-end {
  0%   { 
  	right: 460px;
  	top: 0;
  	background-position: 0 -420px;
  	opacity: 1;
  }
  100% {
	background-position: 0 -460px;
	right: 600px;
	top: 100px;
	opacity: 0;
  }
}


html {
	background: steelblue;
}

.container {
	width: 500px;
	margin: 100px auto;
}

.stripe {
	position: relative;
	height: 40px;
}

.original {
	position: relative;
	z-index: 1;
	background: #ccc;
	height: 40px;
	width: 100%;
}

.undercorner {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: 1;
	width: 100%;
	height: 40px;
	background: #ccc;
}


.back {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 2;
	width: 0;
	height: 0;
	background: 
		linear-gradient(
			224deg, 
			transparent, 
			transparent 45%, 
			transparent 50%, 
			#555 50%, 
			#666 56%, 
			#777 62%, 
			#888 80%,
			#999 100%
		);
}


.back:after {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: 0;
	height: 0;
	box-shadow : -5px 5px 10px -4px rgba(0, 0, 0, .8);
}

.stripe:hover .original {
	-webkit-animation: 	corner-original 1s 1 forwards ease-in, 
						stripe-original 8.8s 1 forwards cubic-bezier(.88,.87,.74,.49);
	-webkit-animation-delay: 0s, 1s;
}

.stripe:hover .undercorner {
	-webkit-animation: 	corner-undercorner 1s 1 forwards ease-in;
}

.stripe:hover .back {
	-webkit-animation: 	corner-back 1s 1 forwards ease-in, 
						stripe-back 8.8s 1 forwards cubic-bezier(.88,.87,.74,.49), 
						stripe-end 0.2s 1 forwards ease-out;	
	-webkit-animation-delay: 0s, 1s, 9.8s;
}

.stripe:hover .back:after {
	-webkit-animation: 	corner-back 1s 1 forwards ease-in, 
						stripe-shadow 8.8s 1 forwards cubic-bezier(.88,.87,.74,.49);	
	-webkit-animation-delay: 0s, 1s;
}
{'fraction_non_alphanumeric': 0.1575, 'fraction_numerical': 0.08865384615384615, 'mean_word_length': 2.6118055555555557, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '578688', 'n_tokens_mistral': 2819, 'n_tokens_neox': 2255, 'n_words': 517}