Animate specific image

Dear Cataniax,

Apologies for the delayed reply.
I am afraid the EZP coming soon page does not allows any other plugins to load.

What kind of animation are you looking for? If possible via plain CSS, I’ll give you CSS code for it.

Dear Cataniax,

I do not see anything except post_site written.

What I wanted to ask you is, what kind of animation are you planning to use.
For example, fadeIn BounceIn etc.

I’ll give you custom CSS that would apply specific animation you want.

• This reply was modified 9 years, 6 months ago by eleopard.

Alright. Please copy the following CSS and paste it in:
Coming Soon > Template > Advanced Tab > Custom CSS Box

bounceIn Animation will be applied to your logo.

#logo{
	animation-duration: 0.5s;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-iteration-count: 1;
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
	backface-visibility: hidden;
	-o-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	animation-fill-mode: both;
	transform: translate3d(0, 0, 0);
	perspective: 1000;
	-o-animation-fill-mode: both;
	-o-transform: translate3d(0, 0, 0);
	-o-perspective: 1000;
	-moz-animation-fill-mode: both;
	-moz-transform: translate3d(0, 0, 0);
	-moz-perspective: 1000;
	-webkit-animation-fill-mode: both;
	-webkit-transform: translate3d(0, 0, 0);
	-webkit-perspective: 1000;
}
@-webkit-keyframes bounceIn {
	0% {
		opacity: 0;
		-webkit-transform: scale(.3);
	}
	
	50% {
		opacity: 1;
		-webkit-transform: scale(1.05);
	}
	
	70% {
		-webkit-transform: scale(.9);
	}
	
	100% {
		-webkit-transform: scale(1);
	}
}

@-moz-keyframes bounceIn {
	0% {
		opacity: 0;
		-moz-transform: scale(.3);
	}
	
	50% {
		opacity: 1;
		-moz-transform: scale(1.05);
	}
	
	70% {
		-moz-transform: scale(.9);
	}
	
	100% {
		-moz-transform: scale(1);
	}
}

@-o-keyframes bounceIn {
	0% {
		opacity: 0;
		-o-transform: scale(.3);
	}
	
	50% {
		opacity: 1;
		-o-transform: scale(1.05);
	}
	
	70% {
		-o-transform: scale(.9);
	}
	
	100% {
		-o-transform: scale(1);
	}
}

@keyframes bounceIn {
	0% {
		opacity: 0;
		transform: scale(.3);
	}
	
	50% {
		opacity: 1;
		transform: scale(1.05);
	}
	
	70% {
		transform: scale(.9);
	}
	
	100% {
		transform: scale(1);
	}
}

.animated.bounceIn {
	-webkit-animation-name: bounceIn;
	-moz-animation-name: bounceIn;
	-o-animation-name: bounceIn;
	animation-name: bounceIn;
}

Please let me know if this works.

For animations, you’ll have to copy the selected animation CSS from Animate It! and paste it in the custom CSS box in the setting page.

If you could tell me the exact animation you need, I can send you the exact CSS that needs to be added.

In order to animate the element infinitely, just add the following rule:

#logo{
    animation-iteration-count: infinite;
}

• This reply was modified 9 years, 6 months ago by eleopard.