search

Home  >  Q&A  >  body text

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

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

<!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>

高洛峰高洛峰2779 days ago874

reply all(6)I'll reply

  • 伊谢尔伦

    伊谢尔伦2017-04-17 12:02:10

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

    reply
    0
  • 天蓬老师

    天蓬老师2017-04-17 12:02:10

    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%.

    reply
    0
  • 大家讲道理

    大家讲道理2017-04-17 12:02:10

    transform-origin: center;

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 12:02:10

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

    }

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-17 12:02:10

    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>

    reply
    0
  • PHP中文网

    PHP中文网2017-04-17 12:02:10

    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.

    reply
    0
  • Cancelreply