Create a flashing button with CSS3 @keyframes Animation

Datetime:2016-08-23 03:06:25          Topic: CSS3           Share

Often, we need a promotional or highlight button like “Hot Offers/Deals/Promotional Discounts” with flashing effects. Today, we will create a beautiful flashing button without any GIF image using Pure CSS3. Before this, I am going to remind the basic ruls of CSS3 Animation first.

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash! To use CSS3 animation, you must first specify some keyframes for the animation. Keyframes hold what styles the element will have at certain times.

The basic of @keyframes Rule

When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.To get an animation to work, you must bind the animation to an element.

Important:  

  1. If the animation-duration property is not specified, the animation will have no effect, because the default value is 0.
  2. The animation-delay property specifies a delay for the start of an animation.
  3. The animation-iteration-count property specifies the number of times an animation should run. it should be any number or “infinite”.
  4. The animation-direction property is used to let an animation run in “reverse” direction or “alternate” cycles.

Why Flashing Buttons?

As I have already mentioned above, often, we need a promotional or highlight button like “Hot Offers/Deals/Promotional Discounts” with flashing effects. Mostly, we are using GIF because Adobe Flash is no-more supported by other devices. Today, we will create this by only using powerful HTML and CSS.

We are using CSS animation to create the flashing effect on our button. The animation feature will require we defines keyframes to trigger this effect. We then define our key frame from 0 to 100% by using the opacity feature to reduce the transparency level. In the animation itself, we specify what will be the duration of the animation and we want the animation to loop infinitely.

HTML

Html is simple. Just, use a class “flashing” with any element.

<span class="flashing">Latest Offer</span>

CSS

It’s time to create effects in class “flashing”. CSS properties are mentioned below.

.flashing{
	background:red;
	padding:5px 10px;
	color:#fff;
	border:none;
	border-radius:5px;
	display:inline-block;
	animation-name: flash;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;

	/* Chrome 4+, Safari 4+, Opera 15+ */
	-webkit-animation-name: flash;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;

	/* Firefox 5+ */
	-moz-animation-name: flash;
	-moz-animation-duration: 1s;
	-moz-animation-timing-function: linear;
	-moz-animation-iteration-count: infinite
}

@keyframes flash {  
	0% { opacity: 1.0 }
	50% { opacity: 0.5 }
	100% { opacity: 1.0 }
}

/* Chrome 4+, Safari 4+, Opera 15+ */
@-webkit-keyframes flash {  
	0% { opacity: 1.0 }
	50% { opacity: 0.5 }
	100% { opacity: 1.0 }
}

/* Firefox 5+ */
@-moz-keyframes flash {  
	0% { opacity: 1.0 }
	50% { opacity: 0.5 }
	100% { opacity: 1.0 }
}

Result / Demo

Latest Offer

Flashing Effect using CSS3 @keyframes Animation

Browser Support for Animations

The numbers in the table specify the first browser version that fully supports the property. Numbers followed by -webkit-, -moz-, or -o- specify the first version that worked with avendor prefix.

For today, it is supported by next browsers:

  • Chrome 43.0 (Supported from version 4.0 using vendor prefix -webkit-)
  • Firefox 16.0 (Supported from version 5.0 using vendor prefix  -moz-)
  • Safari 9.0  (Supported from version 4.0 using vendor prefix  -webkit-)
  • IE 10+
  • Opera 30.0 (Supported from version 12.0 using vendor prefix -o-, and from version 15.0 using vendor prefix  -webkit-)

Important:Internet Explorer 9, and earlier versions, does not support the @keyframe rule or animation property.

That’s it..!!

That’s all, I hope you liked this article. Please feel free to comment and share your thoughts/ideas. Thanks for reading!





About List