CSS Blur Animation

by Brian Layman

HTML

<div>
  <p><a href="#">Hello World!</a></p>
</div>

CSS

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  color: white;
  font-family: "Arial";
}

body {
  background: #222;
}

div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background: skyblue;
  animation: blur 1s ease 0s infinite;
  -webkit-animation: blur 1s ease 0s infinite;
  -moz-animation: blur 1s ease 0s infinite;
}

p {
  text-align: center;
  line-height: 100px;
}

@keyframes blur {
  0%,
  90% {
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -o-filter: blur(0px);
    -ms-filter: blur(0px);
  }
  50% {
    -webkit-filter: blur(50px);
    -moz-filter: blur(50px);
    -o-filter: blur(50px);
    -ms-filter: blur(50px);
  }
}

filter: blur(3px);
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: url(blur.svg#blur);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');