The Power of Pure CSS - No JavaScript Needed

body {
  height: 100vh;
}

.cont {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: inline-block;
}

.dots {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  position: absolute;
  transform: translate(0px,0px);
}

.d1 {
  transform: rotate(0deg) translateX(80px);
  background: #ff7171;
  animation: orbit1 2.5s ease-in-out infinite alternate;
  z-index: 10;
}

.d2 {
  transform: rotate(-90deg) translateX(80px);
  background: #377b37;
  animation: orbit2 2.5s ease-in-out infinite alternate;
  z-index: 8;
}

.d3 {
  transform: rotate(180deg) translateX(80px);
  background: #afaf29;
  animation: orbit3 2.5s ease-in-out infinite alternate;
  z-index: 6;
}

.d4 {
  transform: rotate(90deg) translateX(80px);
  background: #7a5afb;
  animation: orbit4 2.5s ease-in-out infinite alternate;
  z-index: 4;
}

.d5 {
  transform: rotate(135deg) translateX(80px);
  background: #e62575;
  animation: orbit5 2.5s ease-in-out infinite alternate;
  z-index: 5;
}

.d6 {
  transform: rotate(225deg) translateX(80px);
  background: #967e77;
  animation: orbit6 2.5s ease-in-out infinite alternate;
  z-index: 7;
}

.d7 {
  transform: rotate(315deg) translateX(80px);
  background: #d432c7;
  animation: orbit7 2.5s ease-in-out infinite alternate;
  z-index: 9;
}

.d8 {
  transform: rotate(405deg) translateX(80px);
  background: #00bcd4;
  animation: orbit8 2.5s ease-in-out infinite alternate;
  z-index: 3;
}

@keyframes orbit1 {
  0% {
    transform: rotate(0deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(360deg) translateX(0px) scale(1.2,1.2);
  }
}

@keyframes orbit2 {
  0% {
    transform: rotate(-90deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(270deg) translateX(0px) scale(1.6,1.6);
  }
}

@keyframes orbit3 {
  0% {
    transform: rotate(180deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(540deg) translateX(0px) scale(2,2);
  }
}

@keyframes orbit4 {
  0% {
    transform: rotate(90deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(450deg) translateX(0px) scale(2.4,2.4);
  }
}

@keyframes orbit5 {
  0% {
    transform: rotate(135deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(495deg) translateX(0px) scale(2.2,2.2);
  }
}

@keyframes orbit6 {
  0% {
    transform: rotate(225deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(585deg) translateX(0px) scale(1.8,1.8);
  }
}

@keyframes orbit7 {
  0% {
    transform: rotate(315deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(675deg) translateX(0px) scale(1.4,1.4);
  }
}

@keyframes orbit8 {
  0% {
    transform: rotate(405deg) translateX(80px) scale(1,1);
  }

100% {
    transform: rotate(765deg) translateX(0px) scale(2.6,2.6);
  }
}

62

Circle(dots) css animation loader

By: pixeldev

* {
	margin: 0; padding: 0;
	box-sizing: border-box;
}
body {
	background: #ffffff; align-items: center;
    min-height: 100vh; display: flex;
}
.box-outer {
	overflow: hidden; margin: 50px auto;
	width: 200px; height: 200px;
}
.main_box {
	width: 200px; height: 200px;
	position: relative;
	background: #f34c4c;
	border: 5px solid #ffffff;
}
.bar {
	position: absolute; width: 50px;
	height: 5px; background: rgb(0, 0, 0);
	transition: all 1s linear;
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-iteration-count: infinite;
}
.bar.delay {
	animation-delay: 0.5s;
}
.top {
	top: -5px; left: -5px;
}
.right {
	top: 18px; right: -28px;
	transform: rotate(90deg);
}
.bottom {
	bottom: -5px; left: -5px;
}
.left {
	top: 18px; left: -28px;
	transform: rotate(90deg);
}

@-webkit-keyframes h-move {
 0% { left: -5px; }
100% { left: 200px; }
}

@keyframes h-move {
 0% { left: -5px; }
100% { left: 200px; }
}
.top, .bottom { animation-name: h-move; }

@-webkit-keyframes v-move {
0% { top: -5px; }
100% { top:228px; }
}

@keyframes v-move {
 0% { top: -5px; }
100% { top:228px; }
}

.right, .left {
	animation-name: v-move;
}

61

Box border animation

By: pixeldev

<title>Responsive Tables</title>

<section>
   <ol class="collection collection-container">
     
     <li class="item item-container">
       <div class="attribute"></div>
       <div class="attribute" data-name="#">#</div>
       
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">Part Number</div>
           <div class="attribute" data-name="Part Description">Part Description</div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute">Vendor Number</div>
           <div class="attribute">Vendor Name</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute">Order Qty</div>
         <div class="attribute">Receive Qty</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute">Cost</div>
         <div class="attribute">Extended Cost</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute">Duty %</div>
         <div class="attribute">Duty</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute">Freight %</div>
         <div class="attribute">Freight</div>
       </div>
       <div class="attribute">UOM</div>
       <div class="attribute">Vendor Part Number</div>
     </li>
      
     <li class="item item-container">
       <div class="attribute" data-name="Select"></div>
       <div class="attribute" data-name="#">1</div>
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">100-10001</div>
           <div class="attribute" data-name="Part Description">Description of part</div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute" data-name="Vendor Number">001</div>
           <div class="attribute" data-name="Vendor Name">Vendor Name A</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute" data-name="Order Qty">10</div>
         <div class="attribute" data-name="Receive Qty">20</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute" data-name="Cost">$5.00</div>
         <div class="attribute" data-name="Extended Cost">$2.00</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute" data-name="Duty %">3.0%</div>
         <div class="attribute" data-name="Duty">$0.15</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute" data-name="Freight %">3.0%</div>
         <div class="attribute" data-name="Freight">$0.15</div>
       </div>
       <div class="attribute" data-name="UOM">EA</div>
       <div class="attribute" data-name="Vendor Part Number">100001</div>
     </li>
     <li class="item item-container">
       <div class="attribute" data-name="Select"></div>
       <div class="attribute" data-name="#">2</div>
       <div class="attribute-container part-information">
         <div class="attribute-container part-id">
           <div class="attribute" data-name="Part Number">100-10002</div>
           <div class="attribute" data-name="Part Description">A long description of part. This description may overflow.
           </div>
         </div>
         <div class="attribute-container vendor-information">
           <div class="attribute" data-name="Vendor Number">002</div>
           <div class="attribute" data-name="Vendor Name">Vendor Name B</div>
         </div>
       </div>
       <div class="attribute-container quantity">
         <div class="attribute" data-name="Order Qty">10</div>
         <div class="attribute" data-name="Receive Qty">20</div>
       </div>
       <div class="attribute-container cost">
         <div class="attribute" data-name="Cost">$5.00</div>
         <div class="attribute" data-name="Extended Cost">$2.00</div>
       </div>
       <div class="attribute-container duty">
         <div class="attribute" data-name="Duty %">3.0%</div>
         <div class="attribute" data-name="Duty">$0.15</div>
       </div>
       <div class="attribute-container freight">
         <div class="attribute" data-name="Freight %">3.0%</div>
         <div class="attribute" data-name="Freight">$0.15</div>
       </div>
       <div class="attribute" data-name="UOM">EA</div>
       <div class="attribute" data-name="Vendor Part Number">E4-64B</div>
     </li>
   </ol>
</section>

ol.collection {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

* {
    box-sizing: border-box;
}

/* 2 Column Card Layout */
@media screen and (max-width: 736px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 20px;
    }

.item {
        border: 1px solid gray;
        border-radius: 2px;
        padding: 10px;
    }

/* Don't display the first item, since it is used to display the header for tabular layouts*/
    .collection-container>li:first-child {
        display: none;
    }

.attribute::before {
        content: attr(data-name);
    }

/* Attribute name for first column, and attribute value for second column. */
    .attribute {
        display: grid;
        grid-template-columns: minmax(9em, 30%) 1fr;
    }
}

/* 1 Column Card Layout */
@media screen and (max-width:580px) {
    .collection-container {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Tabular Layout */
@media screen and (min-width: 737px) {
    /* The maximum column width, that can wrap */
    .item-container {
        display: grid;
        grid-template-columns: 2em 2em 10fr 2fr 2fr 2fr 2fr 5em 5em;
    }

.attribute-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(var(--column-width-min), 1fr));
    }

/* Definition of wrapping column width for attribute groups. */
    .part-information {
        --column-width-min: 10em;
    }

.part-id {
        --column-width-min: 10em;
    }

.vendor-information {
        --column-width-min: 8em;
    }

.quantity {
        --column-width-min: 5em;
    }

.cost {
        --column-width-min: 5em;
    }

.duty {
        --column-width-min: 5em;
    }

.freight {
        --column-width-min: 5em;
    }

.collection {
        border-top: 1px solid gray;
    }

/* In order to maximize row lines, only display one line for a cell */
    .attribute {
        border-right: 1px solid gray;
        border-bottom: 1px solid gray;
        padding: 2px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

.collection-container>.item-container:first-child {
        background-color: blanchedalmond;
    }

.item-container:hover {
        background-color: rgb(200, 227, 252);
    }

/* Center header labels */
    .collection-container>.item-container:first-child .attribute {
        display: flex;
        align-items: center;
        justify-content: center;
        text-overflow: initial;
        overflow: auto;
        white-space: normal;
    }
}

61

Responsive tables with pure CSS using Grid Layout Module

By: pixeldev

.center {
    text-align:center;
}

#boxWrapper {
  width: 100%;
  height: 300px;
}

.box {
  width: 80px;
  height: 80px;
  margin: 10px;
  display: inline-block;
  font-size: 60px;
  line-height: 80px;
  color: white;
  text-align: center;
  border:1px solid white;
  -webkit-font-smoothing: antialiased;
  -webkit-transform: translateZ(0.1px);
  -moz-transform: translateZ(0.1px);
  -o-transform: translateZ(0.1px);
  -ms-transform: translateZ(0.1px);
  transform: translateZ(0.1px);
  -webkit-animation: hue-animation 7s 0s linear infinite;
  animation: hue-animation 7s 0s linear infinite;
  
}

.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
}

@-webkit-keyframes introAnimation {
  0% {
    -webkit-transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(1) rotate(0deg);
  }
  100% {
    -webkit-transform: scale(0.8) rotate(0deg);
  }
}

@-moz-keyframes introAnimation {
  0% {
    -moz-transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    -moz-transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  70% {
    -moz-transform: scale(1) rotate(0deg);
  }
  100% {
    -moz-transform: scale(0.8) rotate(0deg);
  }
}

@-o-keyframes introAnimation {
  0% {
    -o-transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    -o-transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  70% {
    -o-transform: scale(1) rotate(0deg);
  }
  100% {
    -o-transform: scale(0.8) rotate(0deg);
  }
}

@keyframes introAnimation {
  00% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  70% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(0.8) rotate(0deg);
  }
}

.introAnimation {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: introAnimation;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: introAnimation;
  -o-backface-visibility: visible !important;
  -o-animation-name: introAnimation;
  backface-visibility: visible !important;
  animation-name: introAnimation;
}

.two {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -ms-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.three {
  -webkit-animation-delay: 1.0s;
  -moz-animation-delay: 1.0s;
  -ms-animation-delay: 1.0s;
  -o-animation-delay: 1.0s;
  animation-delay: 1.0s;
}

.four {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -ms-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.five {
  -webkit-animation-delay: 2.0s;
  -moz-animation-delay: 2.0s;
  -ms-animation-delay: 2.0s;
  -o-animation-delay: 2.0s;
  animation-delay: 2.0s;
}

.six {
  -webkit-animation-delay: 2.5s;
  -moz-animation-delay: 2.5s;
  -ms-animation-delay: 2.5s;
  -o-animation-delay: 2.5s;
  animation-delay: 2.5s;
}

.seven {
  -webkit-animation-delay: 3.0s;
  -moz-animation-delay: 3.0s;
  -ms-animation-delay: 3.0s;
  -o-animation-delay: 3.0s;
  animation-delay: 3.0s;
}

.eight {
  -webkit-animation-delay: 3.5s;
  -moz-animation-delay: 3.5s;
  -ms-animation-delay: 3.5s;
  -o-animation-delay: 3.5s;
  animation-delay: 3.5s;
}

.nine {
  -webkit-animation-delay: 4.0s;
  -moz-animation-delay: 4.0s;
  -ms-animation-delay: 4.0s;
  -o-animation-delay: 4.0s;
  animation-delay: 4.0s;
}

.ten {
  -webkit-animation-delay: 4.5s;
  -moz-animation-delay: 4.5s;
  -ms-animation-delay: 4.5s;
  -o-animation-delay: 4.5s;
  animation-delay: 4.5s;
}

.eleven {
  -webkit-animation-delay: 5.0s;
  -moz-animation-delay: 5.0s;
  -ms-animation-delay: 5.0s;
  -o-animation-delay: 5.0s;
  animation-delay: 5.0s;
}

body{
  padding: 0;
  margin: 0;
  overflow: hidden;
}
#boxWrapper{
  width: 100%;
  height: 100vmax;
  background: #efb73e;
  opacity: .8;
  -webkit-animation: hue-animation 7s 0s linear infinite;
  animation: hue-animation 7s 0s linear infinite;
}

@keyframes hue-animation {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

@-webkit-keyframes hue-animation {
  0% {
    -webkit-filter: hue-rotate(0deg);
    filter: hue-rotate(0deg);
  }
  100% {
    -webkit-filter: hue-rotate(360deg);
    filter: hue-rotate(360deg);
  }
}

61

Rainbow Background

By: pixeldev

<details>
   <summary>Question 1</summary>
   <p>Just use a <code>details</code> and <code>summary</code> tags with a little CSS, no more JS. You can use any text or emoji as caret.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora in nihil, deleniti saepe optio corrupti dolorum perferendis hic iure, maiores quae vitae provident minus, ipsum, aut tempore facilis doloremque rem.</p>
 </details>

<details>
   <summary>Question 2</summary>
   <p>Ipsa veritatis inventore reprehenderit dolorem, officiis. Quaerat doloribus voluptatibus impedit repellat quae perspiciatis nesciunt, recusandae facilis unde fugit et eaque rem voluptatum perferendis libero veniam rerum aliquam eos minima voluptate.</p>
 </details>

<details>
   <summary>Question 3</summary>
   <p>Quisquam, necessitatibus quo dolore sequi suscipit magni, voluptatum debitis, accusantium dolorum officia beatae rerum similique optio saepe vel dicta facere modi, voluptatem culpa expedita quaerat eum reprehenderit dolores. Assumenda, doloremque!</p>
 </details>

<details>
   <summary>Question 4</summary>
   <p>Dolorum quaerat facilis magnam commodi molestiae atque similique hic enim pariatur nulla magni amet iusto soluta nemo alias odit recusandae repudiandae dignissimos, fugit asperiores quia eius necessitatibus iure. Possimus, illum.</p>
 </details>

<details>
   <summary>Question 5</summary>
   <p>Consequuntur voluptate consequatur sed adipisci libero temporibus atque itaque voluptas eos, rerum vero qui. Adipisci illum, molestias commodi unde necessitatibus ea, quod explicabo, deleniti voluptatem aliquam reprehenderit, nobis maiores. Saepe?</p>
 </details>

@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
	*{
			box-sizing: border-box;
			transition: 0.25s;
		}
		body{
      font: 18px/1.5 'Abel',system-ui, sans-serif;
			padding: 0 2rem;
			background: #000E;
			color: dimgray;
    }
    h1{
      text-align: center;
      font-size: 3rem;
      padding-bottom: 0.25em;
      border-bottom: 1px solid silver;
      border-image: linear-gradient(to right, transparent 20%, darkslategrey, transparent 80%)30;
    }
/*** Specific styles ***/
    details{
      margin-bottom: 1rem;
      padding: 1rem;
      border-radius: 0.25rem;
			border: 1px solid silver;
    }
    summary{
		  list-style-type: '✔  ';
      font-size: 1.25rem;
      font-weight: bold;
      cursor: pointer; 
      position: relative;
			outline: none;
			color: silver;
    }
    summary::after{
      content: "🔻";
      padding: 0.5rem;
      position: absolute;
      right: 0.25rem;
      top: -0.5rem;
      color: whitesmoke;
    }
    details[open]{
			background: whitesmoke;
    }
	details[open] summary{
		color: dimgrey;
	}
    details[open] summary::after{
      content: "🔺";
    }
/*** End specific styles ***/
    p{
      color: dimgrey;
      letter-spacing: 1.5;
    }

61

Simple Accordion FAQ vanilla CSS

By: pixeldev

body {
    background: #282828; /* #492540/* #282828; */
}

#grid {
    position: relative;
    width: 60%;
    margin: 0 auto;
    padding: 0; /* Clears unordered list default of 40px */
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}
#grid li {
    list-style-type: none;
    position: relative;
    float: left;
    width: 27.85714285714286%;
    padding: 0 0 32.16760145166612% 0;
    -o-transform: rotate(-60deg) skewY(30deg);
    -moz-transform: rotate(-60deg) skewY(30deg);
    -webkit-transform: rotate(-60deg) skewY(30deg);
    -ms-transform: rotate(-60deg) skewY(30deg);
    transform: rotate(-60deg) skewY(30deg);
    background: fd005f;
    visibility: hidden;
    overflow: hidden;
}
#grid li .hexagon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fdbf00;
    -o-transform: skewY(-30deg) rotate(60deg);
    -moz-transform: skewY(-30deg) rotate(60deg);
    -webkit-transform: skewY(-30deg) rotate(60deg);
    -ms-transform: skewY(-30deg) rotate(60deg);
    transform: skewY(-30deg) rotate(60deg);
}
#grid li * {
    visibility: visible;
}
#grid li:nth-child(3n+2) {
  margin: 0 1%;
}
#grid li:nth-child(6n+4), #grid li:nth-child(6n+5), #grid li:nth-child(6n+6) {
    margin-top: -6.9285714285%;
    margin-bottom: -6.9285714285%;
    -o-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -moz-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -webkit-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    -ms-transform: translateX(50%) rotate(-60deg) skewY(30deg);
    transform: translateX(50%) rotate(-60deg) skewY(30deg);
}
#grid li:nth-child(6n+4) { 
    margin-left: 0.5%;
}

61

Pure CSS Hexagonal Grid

By: pixeldev

61

Typewriter Effect -Single Word Animation

By: pixeldev

body {
  text-align:center;
}
header {
  display:inline-table;
  vertical-align:middle;
  margin:1em ;
  padding:0.5em 1em;
  background:
    linear-gradient(
      to right,
      transparent 20%,
      turquoise 20%,
      turquoise 80%,
      transparent 80%
    ) bottom no-repeat,
    linear-gradient(
      to top,
      turquoise 0%,
      turquoise 300%
    ) right 300% no-repeat,
    linear-gradient(
      to right,
      turquoise 0%,
      turquoise 100%
    )   9000% 0 no-repeat,
    linear-gradient(
      to top,
      turquoise 0%,
      turquoise 300%
    ) left 9000% no-repeat
    ;  
  transition:background-size 2s ease-in;
}
header, header ~ header:hover {
  background-size: 
    100% 8px, 
    3px 0, 
    3px 3px, 
    3px 0;

}
header:hover, header ~ header {
  background-size: 
    200% 3px , 
    3px 100%, 
    100% 3px, 
    3px 100%;
  transition:background-size 2s ease-in-out;
}

span {
  font-size:4em;
  display:inline-block;
  vertical-align:middle;
  background:turquoise;
  border-radius:100%;
  box-shadow:0 0 5px;
}

61

Border Animation

By: pixeldev

.wrapper {
	margin: 50px;
	width: 300px;
	height: 300px;
	overflow: hidden;
	position:relative
}

.right {
	border: #3f85a3 solid 15px;
	height: 125px;
	width: 125px;
	border-radius:120px;
	border-top-color: transparent;
	border-left-color: transparent;
	position: absolute;
	transform: rotate(-45deg);
	animation: rota2 1000ms linear;
  -moz-animation: rota2 1000ms linear;
  -o-animation: rota2 1000ms linear;
  -webkit-animation: rota2 1000ms linear;
}

@keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

@-o-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

@-moz-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}
@-webkit-keyframes rota2 {
	from{ transform:rotate(-225deg);}
	to { transform: rotate(-45deg);}
}

.left {
	border: #3f85a3 solid 15px;
	height: 125px;
	width: 125px;
	border-radius:120px;
	border-bottom-color: transparent;
	border-right-color: transparent;
	position: absolute;
	transform: rotate(315deg);
	animation: rota 2000ms linear;
  -o-animation: rota 2000ms linear;
  -moz-animation: rota 2000ms linear;
  -webkit-animation: rota 2000ms linear;
}
@keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@-o-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@moz-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}
@-webkit-keyframes rota {
	from {transform: rotate(-45deg);}
	to { transform: rotate(315deg);}
}

.middle {
  color: #0987bc;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
	width: 130px;
	height: 130px;
	left: 15px;
	top: 15px;
	border-radius: 150px;
	position: relative;
	z-index: 4;
}

.popover {
	background: white;
	width: 80px;
	height: 162px;
	position:absolute;
	top: -3px;
	left: -3px;
	opacity:0;
	z-index:2;
	animation: popover 1000ms linear;
  -moz-animation: popover 1000ms linear;
  -o-animation: popover 1000ms linear;
  -webkit-animation: popover 1000ms linear;
}

@keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-o-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-moz-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

@-webkit-keyframes popover {
	0% {opacity: 1;}
	99%{opacity:1;}
	100% {opacity:0;}
}

60

Circle Animation Loader

By: pixeldev

html, body {
  margin:0;
  padding:0;
}

.comic {
  display:flex;
  flex-wrap:wrap;
  font-family:'Comic Sans', cursive;
  padding:1vmin;
}

.panel {
  background-color:#fff;
  border:solid 2px #cecece;
  box-shadow:0 6px 6px -6px #333;
  display:inline-block;
  flex:1 1;
  height:200px;
  margin:1vmin;
  overflow:hidden;
  position:relative;
}

.text {
  background-color:#fff;
  border:solid 2px #000;
  margin:0;
  padding:3px 10px;
}

.top-left {
  left:-6px;
  position:absolute;
  top:-2px;
  transform:skew(-15deg);
}

.bottom-right {
  bottom:-2px;
  position:absolute;
  right:-6px;
  transform:skew(-15deg);
}

.speech {
  background-color:#fff;
  border:solid 2px #000;
  border-radius:12px;
  display:inline-block;
  margin:.5em;
  padding:.5em 1em;
  position:relative;
}

.speech:before {
  border:solid 12px transparent;
  border-left:solid 12px #000;
  border-top:solid 12px #000;
  bottom:-24px;
  content:"";
  height:0;
  left:24px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.speech:after {
  border:solid 10px transparent;
  border-left:solid 10px #fff;
  border-top:solid 10px #fff;
  bottom:-19px;
  content:"";
  height:0;
  left:27px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.panel:nth-child(1) {
  flex-basis: 400px;
}
.panel:nth-child(2) {
  flex-basis: 200px;
}
.panel:nth-child(3) {
  flex-basis: 200px;
}
.panel:nth-child(4) {
  flex-basis: 200px;
}
.panel:nth-child(5) {
  flex-basis: 200px;
}
.panel:nth-child(6) {
  flex-basis: 200px;
}
.panel:nth-child(7) {
  flex-basis: 400px;
}
.panel:nth-child(8) {
  flex-basis: 200px;
}
.panel:nth-child(9) {
  flex-basis: 200px;
}

/* background colours */

.panel:nth-child(4n+1) {
  background-image:radial-gradient(circle, pink, red);
}

.panel:nth-child(4n+2) {
  background-image:radial-gradient(circle, pink, #65378F);
}

.panel:nth-child(4n+3) {
  background-image:radial-gradient(circle, #999, #333);
}

.panel:nth-child(4n+4) {
  background-image:radial-gradient(circle, #cecece, #3366FF);
}

60

100% Responsive Page Example in Pure CSS

By: pixeldev

body{
  background:-webkit-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-moz-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-ms-radial-gradient(circle,#f6b5ff, #e081ef);
  background:-o-radial-gradient(circle,#f6b5ff, #e081ef);
  background:radial-gradient(circle,#f6b5ff, #e081ef);
}
#slider{
  width:630px;
  border:4px solid #fff;;
  outline:1px solid #999;
  height:313px;
  margin:-315px auto;
  background:-webkit-radial-gradient(#ffefce, #fcd78d);
  background:-moz-radial-gradient(#ffefce, #fcd78d);
  background:-ms-radial-gradient(#ffefce, #fcd78d);
  background:-o-radial-gradient(#ffefce, #fcd78d);
  background:radial-gradient(#ffefce, #fcd78d);
}
#allpic{
  width:70px;
  height:300px;
  background:#ccc;
  margin:5px 0 0 5px;
  float:left;
  transition:all .5s ease-out;
  overflow:hidden;
  border:2px solid #fff;;
  outline:1px solid #999;
}
#allpic:hover {
  width:300px;
}
#shadow{
  width:600px;
  height:30px;
  margin:330px auto 0;
  border-radius:50%;
  box-shadow:0px 12px 10px 3px rgba(0,0,0, 0.5);
}

60

Pure CSS with no arrows

By: pixeldev

<title>Responsive Tables</title>

<section>
    <ol class="collection collection-container">
      
      <li class="item item-container">
        <div class="attribute"></div>
        <div class="attribute" data-name="#">#</div>
        
        <div class="attribute-container part-information">
          <div class="attribute-container part-id">
            <div class="attribute" data-name="Part Number">Part Number</div>
            <div class="attribute" data-name="Part Description">Part Description</div>
          </div>
          <div class="attribute-container vendor-information">
            <div class="attribute">Vendor Number</div>
            <div class="attribute">Vendor Name</div>
          </div>
        </div>
        <div class="attribute-container quantity">
          <div class="attribute">Order Qty</div>
          <div class="attribute">Receive Qty</div>
        </div>
        <div class="attribute-container cost">
          <div class="attribute">Cost</div>
          <div class="attribute">Extended Cost</div>
        </div>
        <div class="attribute-container duty">
          <div class="attribute">Duty %</div>
          <div class="attribute">Duty</div>
        </div>
        <div class="attribute-container freight">
          <div class="attribute">Freight %</div>
          <div class="attribute">Freight</div>
        </div>
        <div class="attribute">UOM</div>
        <div class="attribute">Vendor Part Number</div>
      </li>
      
      <li class="item item-container">
        <div class="attribute" data-name="Select"></div>
        <div class="attribute" data-name="#">1</div>
        <div class="attribute-container part-information">
          <div class="attribute-container part-id">
            <div class="attribute" data-name="Part Number">100-10001</div>
            <div class="attribute" data-name="Part Description">Description of part</div>
          </div>
          <div class="attribute-container vendor-information">
            <div class="attribute" data-name="Vendor Number">001</div>
            <div class="attribute" data-name="Vendor Name">Vendor Name A</div>
          </div>
        </div>
        <div class="attribute-container quantity">
          <div class="attribute" data-name="Order Qty">10</div>
          <div class="attribute" data-name="Receive Qty">20</div>
        </div>
        <div class="attribute-container cost">
          <div class="attribute" data-name="Cost">$5.00</div>
          <div class="attribute" data-name="Extended Cost">$2.00</div>
        </div>
        <div class="attribute-container duty">
          <div class="attribute" data-name="Duty %">3.0%</div>
          <div class="attribute" data-name="Duty">$0.15</div>
        </div>
        <div class="attribute-container freight">
          <div class="attribute" data-name="Freight %">3.0%</div>
          <div class="attribute" data-name="Freight">$0.15</div>
        </div>
        <div class="attribute" data-name="UOM">EA</div>
        <div class="attribute" data-name="Vendor Part Number">100001</div>
      </li>
      <li class="item item-container">
        <div class="attribute" data-name="Select"></div>
        <div class="attribute" data-name="#">2</div>
        <div class="attribute-container part-information">
          <div class="attribute-container part-id">
            <div class="attribute" data-name="Part Number">100-10002</div>
            <div class="attribute" data-name="Part Description">A long description of part. This description may overflow.
            </div>
          </div>
          <div class="attribute-container vendor-information">
            <div class="attribute" data-name="Vendor Number">002</div>
            <div class="attribute" data-name="Vendor Name">Vendor Name B</div>
          </div>
        </div>
        <div class="attribute-container quantity">
          <div class="attribute" data-name="Order Qty">10</div>
          <div class="attribute" data-name="Receive Qty">20</div>
        </div>
        <div class="attribute-container cost">
          <div class="attribute" data-name="Cost">$5.00</div>
          <div class="attribute" data-name="Extended Cost">$2.00</div>
        </div>
        <div class="attribute-container duty">
          <div class="attribute" data-name="Duty %">3.0%</div>
          <div class="attribute" data-name="Duty">$0.15</div>
        </div>
        <div class="attribute-container freight">
          <div class="attribute" data-name="Freight %">3.0%</div>
          <div class="attribute" data-name="Freight">$0.15</div>
        </div>
        <div class="attribute" data-name="UOM">EA</div>
        <div class="attribute" data-name="Vendor Part Number">E4-64B</div>
      </li>
    </ol>
</section>