3.1.x SnippetsCSS3 - Logo Heartbeat

Snippets
Previous topicNext topic
User avatar

Topic Author
Ketchup
Users
Users
Magic user status: Offline
Posts: 20
Joined: Jan 16th, '16, 08:13
    Windows 10 Chrome

CSS3 - Logo Heartbeat

Post by Ketchup »

Will make your logo pulse like a heartbeat, built for default prosilver.

Demo: http://cssdeck.com/labs/simple-css3-hea ... animations

Code: Select all

.imageset.site_logo {
	-webkit-animation: logo-image 1s linear infinite;
	-moz-animation: logo-image 1s linear infinite;
	-ms-animation: logo-image 1s linear infinite;
	animation: logo-image 1s linear infinite;
}


@keyframes "imageset.site_logo" {
 0% {
    -webkit-transform: scale(1.1);
   	-moz-transform: scale(1.1);
   	-o-transform: scale(1.1);
   	-ms-transform: scale(1.1);
   	transform: scale(1.1);
 }
 50% {
    -webkit-transform: scale(0.8);
   	-moz-transform: scale(0.8);
   	-o-transform: scale(0.8);
   	-ms-transform: scale(0.8);
   	transform: scale(0.8);
 }
 100% {
    -webkit-transform: scale(1);
   	-moz-transform: scale(1);
   	-o-transform: scale(1);
   	-ms-transform: scale(1);
   	transform: scale(1);
 }
}

@-moz-keyframes imageset.site_logo {
 0% {
   -moz-transform: scale(1.1);
   transform: scale(1.1);
 }
 50% {
   -moz-transform: scale(0.8);
   transform: scale(0.8);
 }
 100% {
   -moz-transform: scale(1);
   transform: scale(1);
 }
}

@-webkit-keyframes "imageset.site_logo" {
 0% {
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
 50% {
   -webkit-transform: scale(0.8);
   transform: scale(0.8);
 }
 100% {
   -webkit-transform: scale(1);
   transform: scale(1);
 }
}

@-ms-keyframes "imageset.site_logo" {
 0% {
   -ms-transform: scale(1.1);
   transform: scale(1.1);
 }
 50% {
   -ms-transform: scale(0.8);
   transform: scale(0.8);
 }
 100% {
   -ms-transform: scale(1);
   transform: scale(1);
 }
}
User avatar

dmzx
Founder
Founder
Magic user status: Online
Posts: 5974
Joined: Jan 13th, '14, 20:45
    Windows 10 Firefox

Re: CSS3 - Logo Heartbeat

Post by dmzx »

Will check it out :thumbup:
binance.com ;) try it!
User avatar

tamarin
Users
Users
Magic user status: Offline
Posts: 72
Joined: Mar 15th, '15, 00:07
    Windows 10 Firefox

Re: CSS3 - Logo Heartbeat

Post by tamarin »

EpicFawker wrote: Jun 10th, '16, 00:09 Will make your logo pulse like a heartbeat, built for default prosilver.

Demo: http://cssdeck.com/labs/simple-css3-hea ... animations

Code: Select all

.imageset.site_logo {
	-webkit-animation: logo-image 1s linear infinite;
	-moz-animation: logo-image 1s linear infinite;
	-ms-animation: logo-image 1s linear infinite;
	animation: logo-image 1s linear infinite;
}


@keyframes "imageset.site_logo" {
 0% {
    -webkit-transform: scale(1.1);
   	-moz-transform: scale(1.1);
   	-o-transform: scale(1.1);
   	-ms-transform: scale(1.1);
   	transform: scale(1.1);
 }
 50% {
    -webkit-transform: scale(0.8);
   	-moz-transform: scale(0.8);
   	-o-transform: scale(0.8);
   	-ms-transform: scale(0.8);
   	transform: scale(0.8);
 }
 100% {
    -webkit-transform: scale(1);
   	-moz-transform: scale(1);
   	-o-transform: scale(1);
   	-ms-transform: scale(1);
   	transform: scale(1);
 }
}

@-moz-keyframes imageset.site_logo {
 0% {
   -moz-transform: scale(1.1);
   transform: scale(1.1);
 }
 50% {
   -moz-transform: scale(0.8);
   transform: scale(0.8);
 }
 100% {
   -moz-transform: scale(1);
   transform: scale(1);
 }
}

@-webkit-keyframes "imageset.site_logo" {
 0% {
   -webkit-transform: scale(1.1);
   transform: scale(1.1);
 }
 50% {
   -webkit-transform: scale(0.8);
   transform: scale(0.8);
 }
 100% {
   -webkit-transform: scale(1);
   transform: scale(1);
 }
}

@-ms-keyframes "imageset.site_logo" {
 0% {
   -ms-transform: scale(1.1);
   transform: scale(1.1);
 }
 50% {
   -ms-transform: scale(0.8);
   transform: scale(0.8);
 }
 100% {
   -ms-transform: scale(1);
   transform: scale(1);
 }
}
Where I should insert this code?
Thx.
User avatar

zardos
Users
Users
Magic user status: Offline
Posts: 178
Joined: Feb 26th, '16, 22:20
    Windows 10 Firefox

Re: CSS3 - Logo Heartbeat

Post by zardos »

Insert into this ext, cssmagic.css or edit imageset.css in whatever style you use.

Css magic 1.0.7 last version
Image
Previous topicNext topic