A Pen by José Pino.

Brackets-Animation-CSS.markdown

Brackets Animation CSS

Brackets Animation CSS Pure code by @mrjopino

A Pen by José Pino on CodePen.

License.

index.html

<script src="http://fraph.co/assets/js/prefixfree.js"></script>
<!-- Logo Brackets Animation CSS -->
<!-- Developed by @mrjopino -->
<div class="brackets"></div>

style.css

/* 
Author: @mrjopino
Name: Brackets Animation CSS
Description: Logo Brackets Animation CSS
*/
@charset "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Titan+One);

body {
  background: #1b1e24;
  padding-top: 40px;
}

.brackets {
  margin: 40px auto;
	position: relative;
	box-sizing: border-box;
	width: 195px;
	height: 190px;
	background: #25a5de;
	border-radius: 40px;
	overflow: hidden;
	z-index: -1;
	background: #0173bd;
	background: -moz-linear-gradient(top, #29abe2 43%, #0173bd 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(43%,#29abe2), color-stop(100%,#0173bd)); 
	background: -webkit-linear-gradient(top, #29abe2 43%,#0173bd 100%);
	background: -o-linear-gradient(top, #29abe2 43%,#0173bd 100%);
	background: -ms-linear-gradient(top, #29abe2 43%,#0173bd 100%); 
	background: linear-gradient(to bottom, #29abe2 43%, #0173bd 100%);
  transform:scale(.7);
  animation-timing-function:cubic-bezier(0,0,.1,1);
  animation:venpaca .7s infinite;
  
}

.brackets:after {
	position: absolute;
	content: " ";
	top: 24px;
	left: 24px;
	right: 24px;
	bottom: 24px;
	background: #fff;
	border-radius: 20px;
	border: 15px solid #fff;
	-webkit-box-shadow: inset 0px 0px 0 29px #4d4d4d;
	-moz-box-shadow: inset 0px 0px 0 29px #4d4d4d;
	box-shadow: inset 0px 0px 0 25px #4d4d4d;
	z-index: 1;
  animation-timing-function:cubic-bezier(1,1,1,1);
  animation: rotar .7s infinite;
}

.brackets:before {
	position: absolute;
	content: " ";
	top: 30px;
	bottom: 30px;
	left: 50%;
	width: 16px;
	margin: 0 0 0 -8px;
	background: #fff;
	z-index: 2;

}
@keyframes rotar {
  from {transform: rotate(0deg);}
  to {transform: rotate(90deg);}
}

@keyframes venpaca {
  0% {transform:scale(.6);}
  30% {transform:scale(.2);}
  100% {transform:scale(.6);}
}