Title: Animate specific image Last modified: November 26, 2016 --- # Animate specific image * Resolved [catmaniax](https://wordpress.org/support/users/catmaniax/) * (@catmaniax) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/) * Hello! * My site is under construction and I use “EZP Coming Soon Page” plugin in which i have the logo image selected to display on the under construction screen. * How can I put “Animate It” in that specific image? Maybe through WordPress’ Library? * Is there way? * Please let me know. Thanks! Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/animate-specific-image/page/2/?output_format=md) [→](https://wordpress.org/support/topic/animate-specific-image/page/2/?output_format=md) * Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/) * (@eleopard) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8492480) * 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. * Thread Starter [catmaniax](https://wordpress.org/support/users/catmaniax/) * (@catmaniax) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8497497) * Thanks for the reply. * Here’s a an approximate HTML example I have on an image that is on a page of my site: * ![post_site](https://i0.wp.com/www.site.com/wp-content/uploads/default.png?resize =150%2C150&ssl=1) * Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/) * (@eleopard) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8497551) * 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](https://wordpress.org/support/users/eleopard/). * Thread Starter [catmaniax](https://wordpress.org/support/users/catmaniax/) * (@catmaniax) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8499931) * Let’s say Bouncein. I don’t know why “post_site” was only posted, I pasted the whole html, anyway… * Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/) * (@eleopard) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8500592) * 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. * Thread Starter [catmaniax](https://wordpress.org/support/users/catmaniax/) * (@catmaniax) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8502261) * That was quick and great!! * If I want to use another animation I just replace everything that has “bounceIn”? Also, how can I make it animate non-stop? * Thanks again! * Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/) * (@eleopard) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8502391) * 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](https://wordpress.org/support/users/eleopard/). * Thread Starter [catmaniax](https://wordpress.org/support/users/catmaniax/) * (@catmaniax) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8503322) * Well, I was thinking “Pulse” in infinite mode, if it’s not much trouble. * Thanks again! * Thread Starter [catmaniax](https://wordpress.org/support/users/catmaniax/) * (@catmaniax) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8504415) * I want to have the effect of a beating heart sort of speak. * Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/) * (@eleopard) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8504816) * Dear Cataniax, * Please replace the old CSS with this one, in the same Custom CSS box: * ``` #logo{ animation-duration: 1.5s; animation-timing-function: linear; animation-iteration-count: 1; -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -o-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-animation-iteration-count: infinite; /* Safari 4.0 - 8.0 */ animation-iteration-count: infinite; -webkit-animation-name: pulse; -moz-animation-name: pulse; -o-animation-name: pulse; animation-name: pulse; -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */ animation-delay: 1s; } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); } 20% { -webkit-transform: scale(1.1); } 40% { -webkit-transform: scale(1); } 100% { -webkit-transform: scale(1); } } @-moz-keyframes pulse { 0% { -moz-transform: scale(1); } 20% { -moz-transform: scale(1.1); } 40% { -moz-transform: scale(1); } 100% { -moz-transform: scale(1); } } @-o-keyframes pulse { 0% { -o-transform: scale(1); } 20% { -o-transform: scale(1.1); } 40% { -o-transform: scale(1); } 100% { -o-transform: scale(1); } } @keyframes pulse { 0% { transform: scale(1); } 20% { transform: scale(1.1); } 40% { transform: scale(1); } 100% { transform: scale(1); } } ``` * Let me know if this works. * Thread Starter [catmaniax](https://wordpress.org/support/users/catmaniax/) * (@catmaniax) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8506167) * That was great, thanks again! What should I change if I want it a bit faster? * Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/) * (@eleopard) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8506190) * Change animation-duration: 1.5s; to 1s .7s .5s etc. Please do not forget to leave a few kind words in reviews 🙂 - This reply was modified 9 years, 6 months ago by [eleopard](https://wordpress.org/support/users/eleopard/). - This reply was modified 9 years, 6 months ago by [eleopard](https://wordpress.org/support/users/eleopard/). * Thread Starter [catmaniax](https://wordpress.org/support/users/catmaniax/) * (@catmaniax) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8506667) * Thanks again, I just left a small review too 🙂 * Plugin Author [eleopard](https://wordpress.org/support/users/eleopard/) * (@eleopard) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8506703) * Thanks. * Thread Starter [catmaniax](https://wordpress.org/support/users/catmaniax/) * (@catmaniax) * [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/#post-8512425) * Sorry for bringing this up again, but can I use Animate It for only a specific part of the image? I can send you the link to check it out if you can… * Thank you. Viewing 15 replies - 1 through 15 (of 19 total) 1 [2](https://wordpress.org/support/topic/animate-specific-image/page/2/?output_format=md) [→](https://wordpress.org/support/topic/animate-specific-image/page/2/?output_format=md) The topic ‘Animate specific image’ is closed to new replies. * ![](https://ps.w.org/animate-it/assets/icon-256x256.png?rev=989356) * [Animate It!](https://wordpress.org/plugins/animate-it/) * [Frequently Asked Questions](https://wordpress.org/plugins/animate-it/#faq) * [Support Threads](https://wordpress.org/support/plugin/animate-it/) * [Active Topics](https://wordpress.org/support/plugin/animate-it/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/animate-it/unresolved/) * [Reviews](https://wordpress.org/support/plugin/animate-it/reviews/) * 19 replies * 2 participants * Last reply from: [catmaniax](https://wordpress.org/support/users/catmaniax/) * Last activity: [9 years, 6 months ago](https://wordpress.org/support/topic/animate-specific-image/page/2/#post-8520186) * Status: resolved