Support ForumCSS continuous animation for images – Support Forum https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/feed/ Sat, 04 May 2024 02:55:26 +0200 http://bbpress.org/?v=2.5.12-6148 en-US https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6851 <![CDATA[CSS continuous animation for images]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6851 Wed, 25 Feb 2015 13:24:32 +0000 tberin Hi,

I’m trying to make the images on this page to always slowly rotate:

Home Creative

Specifically this one:
src=”https://themes.ishyoboy.com/no8/wp/wp-content/uploads/2014/09/cloud_image.png”

I’ve tried to use this code in the custom CSS box and putting the class name in the image extra css class field but its not working for some reason:

.imagerotate {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
margin:-60px 0 0 -60px;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

Can you please help with this?
Thanks.

]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6852 <![CDATA[Reply To: CSS continuous animation for images]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6852 Wed, 25 Feb 2015 13:34:19 +0000 IshYoBoy Hey Tal,

Please share your page URL. Thanks

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6853 <![CDATA[Reply To: CSS continuous animation for images]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6853 Wed, 25 Feb 2015 13:40:31 +0000 tberin https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6854 <![CDATA[Reply To: CSS continuous animation for images]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6854 Wed, 25 Feb 2015 14:03:50 +0000 IshYoBoy Hey Tal,

Please enter only the class name (without the dot in front of it) into the element’s settings. The dot is used only in the CSS rules. The class names in HTML ale written without the dot ;) P.S. Maybe you should rotate the image only. Not the whole image container. So instead of .imagerotate use .imagerotate img in the CSS.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6856 <![CDATA[Reply To: CSS continuous animation for images]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6856 Wed, 25 Feb 2015 14:18:35 +0000 tberin Ooops :)
Thank you!

]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6858 <![CDATA[Reply To: CSS continuous animation for images]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6858 Wed, 25 Feb 2015 14:49:31 +0000 tberin Just noticed that it breaks the backgrounds structure when scrolling before or on site load, any idea why?

]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6861 <![CDATA[Reply To: CSS continuous animation for images]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6861 Wed, 25 Feb 2015 16:28:04 +0000 IshYoBoy Hmm.. very strange. Is it caused by the code?

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6862 <![CDATA[Reply To: CSS continuous animation for images]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6862 Wed, 25 Feb 2015 16:32:27 +0000 IshYoBoy Hey Tal,

I see you used the suggested .imagerotate img incorrectly. The class name of the image should be only imagerotate but the CSS selector which rotates the image should be .imagerotate img. If you inspect the generated HTML the imagerotate class is not applied on the image but on its container. So now you are rotating the whole container. Maybe if you rotate just the image inside it the problems will be gone.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6885 <![CDATA[Reply To: CSS continuous animation for images]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6885 Thu, 26 Feb 2015 08:45:54 +0000 tberin Hey,

I changed it now but there is still a problem with the backgrounds.
Any idea why?

]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6894 <![CDATA[Reply To: CSS continuous animation for images]]> https://support.ishyoboy.com/forums/topic/css-continuous-animation-for-images/#post-6894 Fri, 27 Feb 2015 09:08:03 +0000 IshYoBoy Hey Tal,

Seems like CSS Transform does not play well with fixed backgrounds:
https://www.google.sk/search?q=transform+braks+backgrounds&oq=transform+braks+backgrounds&aqs=chrome..69i57.6661j0j7&sourceid=chrome&es_sm=119&ie=UTF-8#q=transform+breaks+fixed+backgrounds

You may try to apply some custom workarounds.

Cheers

A 5 star rating is always a great motivation for us if you are happy with our theme or support!
Themeforest | MojoMarketplace | Creative Market

]]>