The Power of Pure CSS - No JavaScript Needed

body{
  background: #111;
  display: flex;
  height: 100vh;
  place-content: center;
  align-items: center;
}
.wrapper {
  background: #fff;
  position: relative;
}

.wrapper #motion-demo {
  offset-path: path("M 0 0 m 0 -37.5 a 37.5 37.5 90 1 0 0 75 a 37.5 37.5 90 1 0 0 -75");
  animation: move infinite cubic-bezier(.71,.54,.26,.8);
  width: 6px;
  height: 6px;
  border-radius: 10px;
  position: absolute;
}
#motion-demo:nth-of-type(1) {
  background: #bada55;
  animation-duration: 1.2s;
  animation-delay: .1s;
}
#motion-demo:nth-of-type(2) {
  background: dodgerblue; 
  animation-duration: 1.2s;
  animation-delay: .2s;
}

#motion-demo:nth-of-type(3) {
  background: springgreen;
  animation-duration: 1.1s;
  animation-delay: .3s;  
}
#motion-demo:nth-of-type(4) {
  background: orangered;
  animation-duration: 1s;
  animation-delay: .4s;  
}
#motion-demo:nth-of-type(5) {
  background: orange;
  animation-duration: 1s;
  animation-delay: .45s;  
}
#motion-demo:nth-of-type(6) {
  background: violet;
  animation-duration: 1s;
  animation-delay: .5s;  
}
#motion-demo:nth-of-type(7) {
  background: orangered;
  animation-duration: 1s;
  animation-delay: .55s;  
}
#motion-demo:nth-of-type(8) {
  background: orange;
  animation-duration: 1s;
  animation-delay: .6s;  
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  50%{
   opacity: 0.5;    
  }
  100% {
    offset-distance: 100%;
  }
}

58

Rainbow Loader Animation

By: pixeldev

57

Bouncing ball

By: pixeldev

57

Mouse Scroll Down Animation

By: pixeldev

57

Pure CSS table gadgets

By: pixeldev

.carousel-wrapper {
  width: 520px; /* 400px * 1.3 */
  height: 350px; /* 250px * 1.4 */
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 5px 25px 0px rgba(46, 61, 73, 0.2);
  border-radius: 20px;
  margin: 100px auto 20px;
}

.carousel-container {
  width: 400px;
  height: 250px;
  overflow: hidden;
  margin: 0 auto;
}

.carousel {
  display: flex;
  width: 1200px; /* 400px * 3 */
  animation: sliding 12s infinite;
}

.carousel div {
  width: 400px;
  height: 250px;
  background-size: cover;
  background-position: center;
}

.carousel:hover {
  animation-play-state: paused;
}

.carousel .image-one {
  background-image: url("https://images.unsplash.com/photo-1480936600919-bffa6b7ecf1e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

.carousel .image-two {
  background-image: url("https://images.unsplash.com/photo-1475053081036-c8eb31d187b3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

.carousel .image-three {
  background-image: url("https://images.unsplash.com/photo-1525278070609-779c7adb7b71?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60");
}

@keyframes sliding {
  30% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(-400px);
  }
  65% {
    transform: translateX(-400px);
  }
  70% {
    transform: translateX(-800px);
  }
  98% {
    transform: translateX(-800px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Responsive: max-width 768px */
@media screen and (max-width: 768px) {
  .carousel-wrapper {
    width: 312px; /* 240px * 1.3 */
    height: 210px; /* 150px * 1.4 */
  }

.carousel-container {
    width: 240px;
    height: 150px;
  }

.carousel {
    width: 720px; /* 240px * 3 */
  }

.carousel div {
    width: 240px;
    height: 150px;
  }

@keyframes sliding {
    30% {
      transform: translateX(0);
    }
    35% {
      transform: translateX(-240px);
    }
    65% {
      transform: translateX(-240px);
    }
    70% {
      transform: translateX(-480px);
    }
    98% {
      transform: translateX(-480px);
    }
    100% {
      transform: translateX(0);
    }
  }
}

57

Responsive Sliding Carousel (CSS Animation Journey Collection)

By: pixeldev

.container {
    margin: 0 auto;
    width: 100%;
    text-align: center;
    font-size: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 400;
    background: #ffffff;
}

h2.title {
    position: relative;
    margin-bottom: 15px;
    padding-bottom: 15px;
    font-size: 30px;
    color: #222222;
}

h2.title::after {
    position: absolute;
    content: "";
    width: 50px;
    height: 3px;
    left: calc(50% - 25px);
    bottom: 0;
    background: #222222;
}

p {
    position: relative;
    margin: 15px auto;
    font-size: 16px;
    color: #222222;
}

.btn {
    position: relative;
    display: inline-block;
    margin: 15px;
    padding: 12px 27px;
    text-align: center;
    font-size: 16px;
    letter-spacing: 1px;
    text-decoration: none;
    color: #999999;
    background: #ffffff;
    border: 3px solid #999999;
    cursor: pointer;
    transition: ease-out 0.5s;
    -webkit-transition: ease-out 0.5s;
    -moz-transition: ease-out 0.5s;
}

.btn.btn-border-1::after,
.btn.btn-border-1::before {
    position: absolute;
    content: "";
    width: 0%;
    height: 0%;
    visibility: hidden;
}

.btn.btn-border-1::after {
    bottom: -3px;
    right: -3px;
    border-left: 3px solid #222222;
    border-bottom: 3px solid #222222;
    transition: width .1s ease .1s, height .1s ease, visibility 0s .2s;
}

.btn.btn-border-1::before {
    top: -3px;
    left: -3px;
    border-top: 3px solid #222222;
    border-right: 3px solid #222222;
    transition: width .1s ease .3s, height .1s ease .2s, visibility 0s .4s;
}

.btn.btn-border-1:hover {
    animation: pulse 1s ease-out .4s;
    color: #222222;
}

.btn.btn-border-1:hover::after,
.btn.btn-border-1:hover::before {
    width: calc(100% + 3px);
    height: calc(100% + 3px);
    visibility: visible;
    transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.btn.btn-border-1:hover::after {
    transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.btn.btn-border-1:hover::before {
    transition: width .1s ease, height .1s ease .1s;
}

.btn.btn-border-2::after,
.btn.btn-border-2::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-2::after {
    top: -3px;
    left: -3px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
}

.btn.btn-border-2::before {
    bottom: -3px;
    right: -3px;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
}

.btn.btn-border-2:hover {
    color: #222222;
}

.btn.btn-border-2:hover::after,
.btn.btn-border-2:hover::before {
    width: calc(50% + 3px);
    height: calc(50% + 3px);
    border-color: #222222;
}

.btn.btn-border-3::after,
.btn.btn-border-3::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-3::after {
    top: -9px;
    left: -9px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
}

.btn.btn-border-3::before {
    bottom: -9px;
    right: -9px;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
}

.btn.btn-border-3:hover {
    color: #222222;
}

.btn.btn-border-3:hover::after,
.btn.btn-border-3:hover::before {
    width: 30px;
    height: 30px;
    border-color: #222222;
}

.btn.btn-border-4::after,
.btn.btn-border-4::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-4::after {
    top: -9px;
    left: -9px;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
}

.btn.btn-border-4::before {
    bottom: -9px;
    right: -9px;
    border-bottom: 3px solid transparent;
    border-right: 3px solid transparent;
}

.btn.btn-border-4:hover {
    color: #222222;
}

.btn.btn-border-4:hover::after,
.btn.btn-border-4:hover::before {
    width: calc(100% + 15px);
    height: calc(100% + 15px);
    border-color: #222222;
}

.btn.btn-border-5::after,
.btn.btn-border-5::before {
    position: absolute;
    content: "";
    width: 0;
    height: 0;
    transition: .5s;
}

.btn.btn-border-5::after {
    top: 0;
    left: 0;
    border-top: 3px solid transparent;
}

.btn.btn-border-5::before {
    bottom: 0;
    right: 0;
    border-bottom: 3px solid transparent;
}

.btn.btn-border-5:hover {
    color: #222222;
}

.btn.btn-border-5:hover::after,
.btn.btn-border-5:hover::before {
    width: 100%;
    height: 100%;
    border-color: #222222;
}

57

CSS Buttons Hover Effects

By: pixeldev

/* Use a static URL since SCSS variable and `unique_id()` can't be replicated in CSS */
main {
  font-family: Helvetica, Arial, sans-serif;
  max-width: 800px;
  margin: 10px auto;
}

main a {
  color: #a00;
}

main a:hover {
  text-decoration: none;
}

main h1 {
  font-size: 1.75em;
  font-weight: lighter;
  text-align: center;
}

main h3 {
  font-size: 1.2em;
  margin-bottom: 1em;
  color: #333;
  text-align: center;
}

main p {
  text-align: center;
  font-weight: bold;
}

.container {
  width: 400px;
  height: 400px;
  margin: 10px auto;
  border: solid 1px #ccc;
  background: url('https://loremflickr.com/400/400?t=static'); /* Simulated `unique_id()` */
}

.container div {
  filter: sepia(75%);
  height: 100%;
  width: 10%;
  max-width: 99%;
  resize: horizontal;
  box-sizing: border-box;
  overflow: auto;
  position: relative;
  animation-delay: 1s;
  animation-duration: 2s;
  animation-name: preview;
  background: url('https://loremflickr.com/400/400?t=static');
}

.container div::after {
  content: ' ';
  position: absolute;
  width: 1em;
  height: 1em;
  background: black;
  bottom: 0;
  right: 0;
  border: solid 1px white;
  border-right: 0;
  border-bottom: 0;
  cursor: col-resize;
}

@keyframes preview {
  0% {
    width: 10%;
  }
  50% {
    width: 90%;
  }
  100% {
    width: 10%;
  }
}

57

Javascriptless Before/After Slider

By: pixeldev

<h1>FAQ</h1>
<details>
  <summary>Here is a question?</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias optio quidem voluptas nihil ipsa expedita. Velit consectetur adipisci ipsum dolor eligendi eos minus assumenda? Eum harum in sunt aperiam sed.
    </p>
  </div>
</details>
<details>
  <summary>Hey!</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias optio quidem voluptas nihil ipsa expedita. Velit consectetur adipisci ipsum dolor eligendi eos minus assumenda? Eum harum in sunt aperiam sed.
    </p>
  </div>
</details>
<details>
  <summary>Another Question</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias optio quidem voluptas nihil ipsa expedita. Velit consectetur adipisci ipsum dolor eligendi eos minus assumenda? Eum harum in sunt aperiam sed.
    </p>
  </div>
</details>
<details>
  <summary>Not Quite There</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias optio quidem voluptas nihil ipsa expedita. Velit consectetur adipisci ipsum dolor eligendi eos minus assumenda? Eum harum in sunt aperiam sed.
    </p>
  </div>
</details>
<details>
  <summary>Need More Help?</summary>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eum repellendus aliquid eligendi nisi ratione maxime natus sed sit cupiditate, harum exercitationem vel quasi numquam fuga tempora in nobis esse rerum nam dolore aliquam! Autem ex architecto error vel ad? Pariatur, non veniam laudantium minima nemo maxime nam nostrum necessitatibus iure itaque ratione doloribus libero harum omnis excepturi! Ad, voluptatum aliquam.
    </p>
  </div>
</details>

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  padding: 5em;
  margin: 0;
  height: 100vh;
  font-family: 'Roboto', sans-serif;
}

details summary {
  padding: 1rem;
  background: rgb(255, 234, 213);
  margin-bottom: 1em;
  cursor: pointer;
  outline: none;
  border-radius: 0.3em;
  font-weight: bold;
  transition: background-color 0.3s;
}

details summary:focus,
details summary:hover {
  background: rgb(210, 189, 168);
}

details summary:after {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  font-family: "Font Awesome 5 Free";
  content: "\f0ab"; /* Initial icon */
  float: right;
}

details summary::-webkit-details-marker {
  color: transparent;
}

details[open] summary:after {
  content: "\f0aa"; /* Change icon when open */
}

details[open] summary ~ * {
  animation: sweep 0.5s ease-in-out;
}

@keyframes sweep {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }
  50% {
    opacity: 0;
    transform: translateY(0%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}

57

Pure CSS Accordion with Animation

By: pixeldev

<h1>Pure CSS Scrollable Table with Fixed Header</h1>
<h2>Using CSS to allow scrolling within a single HTML table</h2>

<h2>The Big 4 Version</h2>
<h3>Basic CSS Browser Filtering</h3>

<div id="tableContainer" class="tableContainer">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="scrollTable">
<thead class="fixedHeader">
	<tr>
		<th width="20%">Header 1</th>
		<th width="30%">Header 2</th>
		<th width="50%">Header 3</th>
	</tr>
</thead>
<tbody class="scrollContent">
	<tr>
		<td width="20%">Cell Content 1</td>
		<td width="30%">Cell Content 2</td>
		<td width="48%">Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
	<tr>
		<td>More Cell Content 1</td>
		<td>More Cell Content 2</td>
		<td>More Cell Content 3</td>
	</tr>
	<tr>
		<td>Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1 Even More Cell Content 1</td>
		<td>Even More Cell Cont asdkfh asoid hfoas ghdfoasgdojf gasdkjfgasd jfgaskjdfg kjasdgf kjasd gjkasgdfkj agskjdfgaskdjfgent 2</td>
		<td>Even More Cell Content 3</td>
	</tr>
</tbody>
</table>
</div>

<div>
<br><br><br><br><br><br><br><br><br><br><br><br>
put a bunch of breaks to test scrolling within the HTML document itself.
<br><br><br><br><br><br><br><br><br><br><br><br>
put a bunch of breaks to test scrolling within the HTML document itself.
<br><br><br><br><br><br><br><br><br><br><br><br>
put a bunch of breaks to test scrolling within the HTML document itself.
<br><br><br><br><br><br><br><br><br><br><br><br>
done.
</div>

body {
	background: #FFF;
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 10px;
	padding: 0
}

table, td, a {
	color: #000;
	font: normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif
}

h1 {
	font: normal normal 18px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h2 {
	font: normal normal 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
	margin: 0 0 5px 0
}

h3 {
	font: normal normal 13px Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #008000;
	margin: 0 0 15px 0
}
/* end basic styling                                 */

/* define height and width of scrollable area. Add 16px to width for scrollbar          */
div.tableContainer {
	clear: both;
	border: 1px solid #963;
	height: 285px;
	overflow: auto;
	width: 900px
}

/* Reset overflow value to hidden for all non-IE browsers. */
html>body div.tableContainer {
	overflow: hidden;
	width: 900px
}

/* define width of table. IE browsers only                 */
div.tableContainer table {
	float: left;
	/* width: 740px */
}

/* define width of table. Add 16px to width for scrollbar.           */
/* All other non-IE browsers.                                        */
html>body div.tableContainer table {
	/* width: 756px */
}

/* set table header to a fixed position. WinIE 6.x only                                       */
/* In WinIE 6.x, any element with a position property set to relative and is a child of       */
/* an element that has an overflow property set, the relative value translates into fixed.    */
/* Ex: parent element DIV with a class of tableContainer has an overflow property set to auto */

thead.fixedHeader tr {
	position: relative;
}

/* set THEAD element to have block level attributes. All other non-IE browsers            */
/* this enables overflow to work on TBODY element. All other non-IE, non-Mozilla browsers */

/* make the TH elements pretty */
thead.fixedHeader th {
	background: #C96;
	border-left: 1px solid #EB8;
	border-right: 1px solid #B74;
	border-top: 1px solid #EB8;
	font-weight: normal;
	padding: 4px 3px;
	text-align: left
}

html>body tbody.scrollContent {
	display: block;
	height: 262px;
	overflow: auto;
	width: 100%
}

html>body thead.fixedHeader {
	display: table;
	overflow: auto;
	width: 100%
}

/* make TD elements pretty. Provide alternating classes for striping the table */
/* http://www.alistapart.com/articles/zebratables/                             */
tbody.scrollContent td, tbody.scrollContent tr.normalRow td {
	background: #FFF;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

tbody.scrollContent tr.alternateRow td {
	background: #EEE;
	border-bottom: none;
	border-left: none;
	border-right: 1px solid #CCC;
	border-top: 1px solid #DDD;
	padding: 2px 3px 3px 4px
}

57

Pure CSS Scrollable Table with Fixed Header

By: pixeldev

*, html,body{
	padding:0px;
	margin:0px;
	box-sizing:border-box;
	font-family:'Poppins', sans-serif;
}
::selection{
	background-color:#2d98da;
	color:#fff;
}
body{
	background-color:#227093;
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	min-height:100vh;
}
.Box{
	position:relative;
	width:150px;
	height:150px;
	border:3px solid rgba(255,255,255,.2);
	border-radius:50%;
	text-align:center;
	line-height:150px;
	color:#57beec;
	font-size:20px;
	box-shadow:0px 0px 10px rgba(0,0,0,.2);
	font-weight:bold;
}
.Box:before{
	content:'';
	position:absolute;
	top:-3px;
	left:-3px;
	width:100%;
	height:100%;
	background-color:transparent;
	border:3px solid transparent;
	border-top:3px solid #57beec;
	border-right:3px solid #57beec;
	border-radius:50%;
	transform:rotate(0deg);
	animation:SpanLoading 2s linear infinite;
}
.Box span{
	position:absolute;
	top: 50%;
	left:50%;
	width:50%;
	height:3px;
	background-color:transparent;
	transform-style:preserve-3d;
	transform-origin:left;
	transform:rotate(42deg);
	animation:Loading 2s linear infinite;
}
.Box span:before{
	content:'';
	position:absolute;
	width:15px;
	height:15px;
	border-radius:50%;
	background-color:#57beec;
	right:-7px;
	bottom:-7px;
	box-shadow:0px 0px 10px #57beec;
}

@keyframes Loading{
	0%{
	transform:rotate(42deg);
	}
	100%{
	transform:rotate(402deg);
	}
}

@keyframes SpanLoading{
	0%{
	transform:rotate(0deg);
	}
	100%{
	transform:rotate(360deg);
	}
}

57

Glowing Loader Ring Animation

By: pixeldev

56

Border Style

By: pixeldev

<h3>Example 1: Two-Table Structure</h3>
<div id="constrainer">
<div class="scrolltable">
   <table class="header"><thead><th>foo</th><th>foo</th><th>foo</th><th>foo</th></thead></table>
   <div class="body">
       <table>
           <tbody>
           <tr><td>1</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>2</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>3</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>4</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>5</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>6</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>7</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>8</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>9</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>10</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>11</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>12</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>13</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>14</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>15</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>16</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>17</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>18</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>19</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>20</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>21</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>22</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>23</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>24</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>25</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>26</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>27</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>29</td><td>foo</td><td>foo</td><td>foo</td></tr>
           <tr><td>30</td><td>foo</td><td>foo</td><td>foo</td></tr>
           </tbody>
       </table>
   </div>
</div>
</div>

<h3>Example 2: Single-Table Structure</h3>
<div id="constrainer2">
    <table>
        <thead>
          <th>foo</th><th>foo</th><th>foo</th><th>foo</th>
        </thead>
        <tbody>
          <tr><td>1</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>2</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>3</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>4</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>5</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>6</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>7</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>8</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>9</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>10</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>11</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>12</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>13</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>14</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>15</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>16</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>17</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>18</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>19</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>20</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>21</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>22</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>23</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>24</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>25</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>26</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>27</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>28</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>29</td><td>foo</td><td>foo</td><td>foo</td></tr>
          <tr><td>30</td><td>foo</td><td>foo</td><td>foo</td></tr>
        </tbody>
    </table>
</div>

* {
  box-sizing: border-box;
}
body {
  font: 14px/1 Arial, sans-serif;
}
.scrolltable {
    overflow-x: scroll;
    height: 100%;
    display: flex;
    display: -webkit-flex;
    flex-direction: column;
    -webkit-flex-direction: column;
}
.scrolltable > .body {
    /*noinspection CssInvalidPropertyValue*/
    width: -webkit-fit-content;
    overflow-y: scroll;
    flex: 1;
    -webkit-flex: 1;
}

/* an outside constraint to react against */
#constrainer {
    width: 400px;
    height: 200px;
}
#constrainer2 {
    width: 400px;
    overflow-x: scroll;
}
#constrainer2 tbody {
    overflow-y: scroll;
    display: block;
    height: 200px;
}
#constrainer2 thead {
    display: table-row;
}

/* only styling below here */
#constrainer, #constrainer2 {
    border: 1px solid lightgrey;
}
table {
    border-collapse: collapse;
}
th, td {
  border: 1px solid #bbb;
  min-width: 150px;
  padding: 8px 16px;
}
th {
    background-color: lightgrey;
    border-width: 1px;
}
td {
    border-width: 1px;
}
tr:first-child td {
    border-top-width: 0;
}
tr:nth-child(even) {
    background-color: #eee;
}

56