Menu
i want to move the "letsgo" div to animate from left-margin 100% to margin auto. i.e it stop at a point where left margin and right margin are equal. but i can't figure it out. Please Help me.
My Code is given bellow:
<!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>
495
I know this is an old post, but if anyone is looking for another solution without absolute positioning, you can use margin and translate. Something like this:
0% {
margin-left: 100%;
transform: translateX(0%);
}
100% {
margin-left: 50%;
transform: translateX(-50%);
}
As Samih says, you can not animate properties between 2 non numeric values.
One posible way to do it is centering the div using 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
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
