Community
Learn
Tools Library
AI Tools
Leisure
search
English
css3 - 为什么运行动画后，原本居中的位置却发生了偏移？
高洛峰
高洛峰 2017-04-17 12:00:10
0
6
933

为什么运行动画后，原本居中的位置却发生了偏移？

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            
            *{
                padding: 0px;
                margin: 0px;
            }
            .box1{
                width: 600px;
                height: 200px;
                background: orange;
                position: relative;
                
            }
            .box1 span{                
                position: absolute;
                border: 8px solid #fff;
                border-top: 8px solid transparent;
                border-radius: 999px;
                top: 50%;left: 50%;
                transform: translate(-50%,-50%);
                
                
            }
            .box1 span:nth-child(1){
                width: 80px;
                height: 80px;                
                /*animation: span1 2s  linear infinite ;*/
                
            }
            .box1 span:nth-child(2){
                width: 40px;
                height: 40px;
                
                /*animation: span2 1s linear infinite ;*/
                
            }
            
            @-webkit-keyframes span1{
                0%{transform: rotate(360deg); opacity: 1;}
                50%{transform: rotate(180deg); opacity: .5;}
                100%{transform: rotate(0deg); opacity: 0;}
            }
            @-webkit-keyframes span2{
                0%{transform: rotate(0deg); opacity: .5;}
                50%{transform: rotate(180deg); opacity: 1;}
                100%{transform: rotate(360deg); opacity: .5;}
            }
            
        </style>
    </head>
    <body>
        <p class="box1">
            <span></span>
            <span></span>
        </p>
</body>

</html>

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师，...

reply all(6)
伊谢尔伦
伊谢尔伦2017-04-17 12:02:10 6 floor 
.box1 span:nth-child(1){
     width: 80px;
     height: 80px;
     animation: span1 2s  linear infinite ;
     margin: -40px 0 0 -40px;
}
.box1 span:nth-child(2){
     width: 40px;
    height: 40px;
    animation: span2 1s linear infinite ;
    margin: -20px 0 0 -20px;
}
Like +0
Add Reply
Peter_Zhu
Peter_Zhu2017-04-17 12:02:10 5 floor

I have encountered this pitfall. Don’t use transfrom for your positioning conversion, change it to margin-left:-50%width; if you use transfrom, it will position the initial position to left:50%.

Like +0
Add Reply
大家讲道理
大家讲道理2017-04-17 12:02:10 4 floor 
transform-origin: center;
Like +0
Add Reply
洪涛
洪涛2017-04-17 12:02:10 3 floor

.box1 span{

position: absolute;
border: 8px solid #fff;
border-top: 8px solid transparent;
border-radius: 999px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
**transform-origin: 0 0;**

}
@-webkit-keyframes span1{

0%{transform: rotate(360deg) **translate(-50%,-50%);** opacity: 1;}
50%{transform: rotate(180deg) **translate(-50%,-50%);** opacity: .5;}
100%{transform: rotate(0deg) **translate(-50%,-50%);** opacity: 0;}

}
@-webkit-keyframes span2{

0%{transform: rotate(0deg) **translate(-50%,-50%);** opacity: .5;}
50%{transform: rotate(180deg) **translate(-50%,-50%);** opacity: 1;}
100%{transform: rotate(360deg) **translate(-50%,-50%);** opacity: .5;}

}

Like +0
Add Reply
伊谢尔伦
伊谢尔伦2017-04-17 12:02:10 2 floor

The reason is as mentioned above. Because CSS3 animation is used, do not use transfrom when setting the offset above. Please write down the specific code: 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        .box1 {
            width: 600px;
            height: 200px;
            background: orange;
            position: relative;
        }

        .box1 span {
            position: absolute;
            border: 8px solid #fff;
            border-top: 8px solid transparent;
            border-radius: 999px;
            top: 50%;
            left: 50%;
            /*移除这里定位*/
        }

        .box1 span:nth-child(1) {
            width: 80px;
            height: 80px;
            /*新增*/
            margin-left: -40px;
            margin-top: -40px;
            animation: span1 2s  linear infinite ;
        }

        .box1 span:nth-child(2) {
            width: 40px;
            height: 40px;
            /*新增*/
            margin-left: -20px;
            margin-top: -20px;
            animation: span2 1s linear infinite ;
        }
        @keyframes span1 {
            0% {
                transform: rotate(360deg);
                opacity: 1;
            }
            50% {
                transform: rotate(180deg);
                opacity: .5;
            }
            100% {
                transform: rotate(0deg);
                opacity: 0;
            }
        }
        @-webkit-keyframes span1 {
            0% {
                transform: rotate(360deg);
                opacity: 1;
            }
            50% {
                transform: rotate(180deg);
                opacity: .5;
            }
            100% {
                transform: rotate(0deg);
                opacity: 0;
            }
        }

        @-webkit-keyframes span2 {
            0% {
                transform: rotate(0deg);
                opacity: .5;
            }
            50% {
                transform: rotate(180deg);
                opacity: 1;
            }
            100% {
                transform: rotate(360deg);
                opacity: .5;
            }
        }
    </style>
</head>

<body>
    <p class="box1">
        <span></span>
        <span></span>
    </p>
</body>

</html>
Like +0
Add Reply
洪涛
洪涛2017-04-17 12:02:10 1 floor

You need to use absolute positioning to position the initial point of the element to be rotated to the center of the element. The normal initial point is at the top left
Use left:50%;top:50%;margin-left:-20px/One-half of the element/;margin-top:-20px/One-half of the element/;
This way the rotation of the elements will not be staggered.

Like +0
Add Reply
Popular Topics
More>
Popular Articles
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template