Blog Post: CSS Pulse

Red Deer & Blackfalds Web Design Writes:

Well! Here is an obscure bit of CSS that you may find interesting for one of your future Web Developments! It is called a “Pulsing CSS” and it will take a section of your website (or rather an image, as is the example below) and cause it to appear to pulsate as it gradually fades in and out of the screen. See the example below:

Pulsing CSS Red Deer Web Design

Exactly how you may choose to utilize this bit of animation is completely up to you! Most Web Design now a days is free from animation since the major overhaul of most flash-related websites; however, you can still find instances where this may seem appropriate. Utilize the CSS below to utilize this on your own website:

.pulse {
-webkit-animation: pulse 4s infinite;
-moz-animation: pulse 4s infinite;
-o-animation: pulse 4s infinite;
animation: pulse 4s infinite;
}

@-moz-keyframes pulse {
0% {-moz-transform: scale(0.9, 0.9); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-moz-transform: scale(1, 1); opacity: 0.0;}
}

@-webkit-keyframes pulse {
0% {-webkit-transform: scale(0.9, 0.9); opacity: 0.0;}
50% {opacity: 1.0;}
100% {-webkit-transform: scale(1, 1); opacity: 0.0;}
}

@keyframes pulse {
0% {scale: (0.9, 0.9); opacity: 0.0;}
50% {opacity: 1.0;}
100% {scale: (1, 1); opacity: 0.0;}
}

Joshua Neufeld

Owner at Red Anchor Studio
At Red Anchor Studio we are dedicated to building local business! We offer high quality developments at an affordable price, and we can work to get your business online at any budget.

Latest posts by Joshua Neufeld (see all)