All geek questions in one place

Css3 animation brand does not automatically work

I want to move the "letgo" div to animate from the left edge 100% to the auto field. that is, stop at the point where the left field and the right field are equal. but i can't figure it out. Please help me.

My code is below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Do IT...</title>
        <meta charset="UTF-8">
        <style>
            #letsgo{
                height: 600px;
                width: 500px;
                border: 2px solid #64BBF0;
                border-radius: 2px;
                margin: auto;
                position: relative;
                animation-fill-mode: forwards;
                box-shadow: 5px 5px 2px #64BBF0;
                animation-name: miku;
                animation-duration: 1s;



            }
            @keyframes miku{
                0%{
                    margin-left: 100%;
                }

                100%{
                    margin: auto;

                }


            }
            #doit{
                height: 100px;
                width: 100px;
                border-radius: 50%;
                background: yellow;
                position: absolute;
                top: 250px;
                left: 200px;
            }

            .child{
                height: 25px;
                width:25px;
                border-radius: 50%;
                background: red;
                position: absolute;
                top: 287.5px;
                left:237.5px;                               
            }

            *{
                transition: all 2s ease-out;    
            }

            #letsgo:hover .child{               
                box-shadow: -237.5px -287.5px red,
                -237.5px  287.5px red,
                237.5px -287.5px red,
                237.5px 287.5px red,
                237.5px 0 red,
                -237.5px 0 red,
                0 287.5px red,
                0 -287.5px red;
            }
        }
        </style>
    </head>

    <body>
            <div id="letsgo">
                <div id="doit"></div>
                <div class="child"></div>
            </div>
    </body>
</html>
+4
source share
2 answers

As Samih says, you cannot animate properties between 2 non-numeric values.

One possible way to do this is to center the div using the left property (so you need absolute positioning) combined with margin:

#letsgo{
   height: 600px;
   width: 500px;
   border: 2px solid #64BBF0;
   border-radius: 2px;
   margin: auto;
   position: absolute;
   box-shadow: 5px 5px 2px #64BBF0;
   -webkit-animation-fill-mode: forwards;
   -webkit-animation-name: miku;
   -webkit-animation-duration: 3s;
   -webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes miku{
  0% { margin-left: 0px;
         left: 100%;             }
   100% { margin-left: -250px;
         left: 50%;        }
      }

fiddle

+4
source

, , - , margin translate. - :

0% {
    margin-left: 100%;
    transform: translateX(0%);
}
100% {
    margin-left: 50%;
    transform: translateX(-50%);
}
+4

Source: https://habr.com/ru/post/1528798/

More articles:


All Articles