Why Isn't My CSS3 Rotate Animation Working?-CSS Tutorial-php.cn

Why Isn't My CSS3 Rotate Animation Working?

DDD

Release： 2024-12-08 20:23:14

Original

849 people have browsed it

Why Isn't My CSS3 Rotate Animation Working?

CSS3 Rotate Animation

In this post, we'll troubleshoot an issue with a CSS3 rotate animation that's not working as expected. The user intends to have an image rotate 360 degrees indefinitely, but the image remains still.

Let's examine the provided CSS to identify the cause:

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

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

Copy after login

After reviewing the CSS, we've identified a few areas where adjustments are necessary for the animation to work correctly:

Float: The float: left property is not required for the animation to function. Remove it.
Position: The position: absolute property is causing the image to be positioned incorrectly. Change it to position: fixed.
Margin: The margin-top and margin-left properties are used to center the image, but they're not necessary for the animation. Remove them.
Animation Properties: The animation properties appear to be correct, except for the keyframe itself. In the @keyframes rule, it's missing a from keyframe with the same transform properties as the to keyframe.

Here's the corrected CSS:

.image {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;

    -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); 
    } 
}

Copy after login

With these adjustments, the image should now rotate smoothly around its center.

The above is the detailed content of Why Isn't My CSS3 Rotate Animation Working?. For more information, please follow other related articles on the PHP Chinese website!