Unlimited Rotation with CSS3

I'm attempting to create a spinning image effect that rotates 360 degrees infinitely on hover. However, it seems that the background element I've used to display the image might be causing issues. I'm not sure how else to display the image without using a background element.
Using bootstrap 3 and unsure how to integrate glyphicons.

<div class="services">
    <i class="icon-html5"></i>
    <h4 class="service-heading">HTML5</h4>
    <p>Developed with high level of coding and care to provide everyone with a HTML5 compliant markup.</p>
</div>

.services{
    background-color:#F5F5F5;
    border-radius: 5px 5px 5px 5px;
    cursor: pointer;
    margin:60px 0;
    padding:14px;
    position: relative;
}
.services i{
    border:10px solid #FFFFFF;
    border-radius: 50% 50% 50% 50%;
    color:#F4F4F4;
    font-size: 18px;
    height:100%;
    left:50%;
    line-height: 100%;
    margin: -60px 0 0 -60px !important;
    padding:0 !important;
    position: absolute;
    top:0px;
    transition: all 0.3s ease-in-out 0s;
    width:140px;
    background-color:#F47E7E;
}
.services:hover > i{
    animation: 1.5s linear 0s normal none infinite spinAround;
    border: 10px solid #FFFFFF;
}
.icon-html5{
    background-image: url('../img/html5.png');
    background-repeat: no-repeat;
    animation: 1.5s linear 0s normal none infinite spinAround;
    border: 10px solid #FFFFFF;
    background-position:center;
}

JS Fiddle - http://jsfiddle.net/MJXrM/1/

Thank you!

htmlcssanimationtransition

Answer №1

Your CSS is incomplete without the following keyframes:

@-moz-keyframes spinAround { 
    from {-moz-transform: rotate(00deg); } 
    to {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes spinAround {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
}

@keyframes spinAround {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

Check out this sample on JSFiddle for reference: http://jsfiddle.net/MJXrM/3/

I have also made an adjustment here:

.services:hover > i

to:

.services > i:hover

Answer №2

Incorporating 'less' into bootstrap is simple. Here's a quick snippet you can use:

.services > i:hover {
    .icon-spin;
}

Answer №3

Have you thought about utilizing sprite sheet animation for your Infinite Spin feature? By using an animation file, you can easily implement it with the code provided below. This method ensures compatibility with both older browsers and modern ones.

<div class="spinner-bg">
    <div id="spinner">
    </div>
</div>

.spinner-bg
{
    width: 44px;
    height: 41px;
    background:#000000;
}

#spinner
{
    width: 44px;
    height: 41px;
    background:url(./preloadericon.png) no-repeat;
}

<script>
var currentbgx = 0;
var circle = document.getElementById("spinner");
var circleTimer = setInterval(playAnimation, 100);

function playAnimation() {
    if (circle != null) {
        circle.style.backgroundPosition = currentbgx + "px 0";
    }

    currentbgx -= 44; //one frame width, there are 5 frames
    //start from 0, end at 176, depending on the png frame length
    if (currentbgx < -176) {
        currentbgx = 0;
    }
}
</script>

You can explore more HTML animation implementations through the following links:

Discover Loading AJAX Spinner Animation

Learn How to Create CSS Animation in HTML5 Games

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the power of pseudo selectors such as ::before within the scoped style of Vue.js

Review the following styles: <template> <!-- Some Tags --> <div class="mb-8 w-full"> <span class="subline"></span> </div> </template> . . . <style scoped lang="scss"> ...

cssvue.jssassvuejs3scoped

The importance of CSS style prioritization

I can't seem to figure out CSS declaration priority. I have an external CSS file with a rule and some inline CSS declarations that are supposed to override it. According to my understanding, inline styles should take precedence over external CSS rules ...

htmlcsscss-selectors

Create a regular expression that permits a sequence of numbers (either integer or decimal) arranged in groups of up to five, with each

Is it possible to create a regular expression that allows integers and decimals? var reg = /^((\s*)|([0-9]\d{0,9}(\.\d{1,3})?%?$))$/.; How can users input 0 to 5 groups of integers and decimals separated by |? Updated: This regex sh ...

javascripthtmlregex

Managing HTML5 Video in a slider

I've designed a unique video slider that cycles through 4 videos. Each video has a custom play button and additional overlay content. Once the video starts playing, the overlay content and play button fade out to reveal the default video controls. The ...

javascriptjqueryhtmlvideohtml5-video

Is it possible to continuously increase the value of a CSS property with each click?

I am trying to implement a feature where the value of an element decreases each time a different element is clicked. Currently, I have the following code: $("#trigger_heritage").click(function () { $(".heritage_content ul").css("margin-left", + -880); ...

javascriptjquerycssmargin

Is it considered poor practice to modify a Bootstrap class in Bootstrap 4?

For instance: form-control appears like this Would it be considered inappropriate if I incorporate this scss code? .form-control { -webkit-transition: all 0.30s ease-in-out; -moz-transition: all 0.30s ease-in-out; -ms-transition: all 0.30s ea ...

csstwitter-bootstrapsassbootstrap-4conventions

Initially unchecked Django Model Boolean Field with initial=False and required=False does not seem to be functioning as intended

Forms.py class CustomPostedForm(forms.ModelForm): posted = forms.BooleanField(required=False, initial=False) Views.py postform = CustomPostedForm(request.POST, instance=author) if postform.is_valid(): postform.save() ...

htmldjangodjango-modelsdjango-forms

What is a solution to prevent style.css from being recognized as the Jekyll Page?

Currently, I am utilizing an expression {% assign mypages = site.pages | sort: "order" %} {% for page in mypages %} {% unless page.exclude %} <a href="{{page.url|absolute_url}}"> {{ page.shortname }} <span class="rate">{% include indexmod.h ...

cssrubyjekyllliquidgithub-pages

Manage your video playback by tracking the movement of your mouse on the screen

Is it possible to use mouse position on screen to control a video? Imagine, if I have my cursor on the left side of the screen, the video starts from the first frame. But as I move my cursor to the right side, the video progresses until the cursor reaches ...

jqueryhtmlvideocontrolsmousemove

When clicking on a dropdown option, the OnClick event does not seem

When selecting an option from the dropdown, it should retrieve a value from the database and display it in a text field. I implemented a click function which worked in Firefox but not in Google Chrome. HTML: <select id="classi" name="classi"> & ...

jqueryhtmlcodeigniter

What is the best way to preserve search form results while submitting a different form on the same page?

Initially, a list of businesses stored in a database is displayed. Users can search for businesses by industry or state using a form. The search results include an option to move the businesses to different tables. After submitting the form to relocate a b ...

phphtmlmysql

Discovering the font-weight attribute in Selenium IDE

Currently, I am working with Selenium IDE and aim to detect when a text element has the 'font-weight:bold' CSS property applied to it using 'verifyAttribute'. The specific CSS locator being used is: css=body.home.es ul#languages li:nt ...

cssdomseleniumcss-selectorsselenium-ide

Having trouble retrieving the value of the hidden field using ng-model

Hello, I'm currently learning AngularJS and facing some challenges with accessing hidden field values using ng-model. Specifically, I am working on an editing modal where I need to retrieve the ID for each record. Below is my controller code snippet: ...

javascripthtmlangularjs

Creating circular patterns with looping on a canvas

My goal is to draw circles in a loop, but when I execute my code, I am encountering an unexpected result: The intention is to simply draw 3 circles in random positions. Here is my current code: for (var i = 0; i < iloscU; i++) { ctx.strokeStyle = ...

javascripthtml

Height of dropdown items in the horizontal navbar

I am working on a navbar that includes a dropdown menu. Currently, the dropdown items are being displayed horizontally in full width with a larger height. However, I would like them to be displayed vertically in full width and with a smaller, normal height ...

csstwitter-bootstrap-3

CSS: Adjusting the vertical alignment of numbers in an ordered list

Hey there, I have a question about the vertical alignment of numbering in an ordered list. It seems that the numbers are being pushed to the baseline when <li> elements contain floated divs only. Is there any way to prevent this and have the numbers ...

csslistcss-float

The issue with the data backdrop not functioning properly in Angular 6 is ongoing and

My issue lies with the data-backdrop attribute in my Bootstrap 4 modal. It does not function as expected. The intended behavior is for the modal to close when clicked outside of it, but this is not happening. I am using Angular 6: I have attempted setting ...

jqueryhtmlbootstrap-4angular6

Using an SVG as your cursor: A step-by-step guide

Is there a way to use an SVG image as the mouse cursor when hovering over a specific div? I've been trying to make it work by adding this line of code: cursor: url(http://elusivethemes.com/assets/down.svg), auto; Unfortunately, it doesn't seem t ...

csssvgmouse-cursor

A continuous loop of text is displayed in a slideshow format, with different image files used for the navigation buttons "back", "stop", and "forward"

I am in need of a unique slide show that displays text exclusively attached to CSS, with image files for the navigation buttons. I have been searching for days without success, as most options available are for image slideshows and not suitable for my text ...

javascriptjquerycsstextslideshow

Php/JavaScript Error: Identifier Not Found

I've double-checked my code multiple times, but it still doesn't seem to be working properly. When the PHP runs, the browser console displays the following error: Uncaught SyntaxError: Unexpected identifier. I'm not sure if this is a si ...

javascriptphpcsshtmlbootstrap-4