How can I fix a side of an element when i made it moving after rotate it ??

[Wail Ashraf]

Hay there I’m returned .
I made a line and i rotate it and i moved it ;
so when it’s move it’s moving a by the two sides ,
Can anyone tell me how can i fix a one of it sides ?
This is the HTML code :

<div1> </div1>

And the CSS code :

div1 {
display: inline-block;
width: 40px;
height: 3px;
position : absolute;
left : 574px;
top: 115.6px;
background: black;
border-radius: 50px;
-webkit-animation: loader 15s alternate;
transition:margin-left 1s;
-webkit-transform:rotate(70deg);
transition: div width 9s;
}
@-webkit-keyframes loader {
0% {
width: 0px;
height: 3px;
opacity: 1;
-webkit-transform: translateY(90);
background:whit
}

50% {
background:whit
}

100% {
width: 40px;
height: 3px;
opacity: 1;
margin-top:10px;
margin-left:-10px;

}
}

.

[Paulie_D]

Please make a Codepen Demo rather than just copy code into your question.

It will help us see what the problem is and may help you narrow down the issue.

I can see at a quick glance that you have many errors and typos in your existing code.

[nkrisc]

Unfortunately humans don’t have the same rendering engines as browsers and can not see an issue by reading code and rendering it in their head.

If you make a codepen showing the issue using the code you provided it’ll be easier for others to help you.

[Wail Ashraf]

Sorry but I can’t insert it into code pen because my internet connection is very bad and there is not any strong connect in my city ( “We are in a war”) because ISIS :(

[Paulie_D]

If you post here, you can use Codepen.

However, if you ‘re open to suggestions.

First, validate your HTML & CSS.

Second, don’t start at the end.

Animate one property…if that works, add the next one to the animation and repeat the testing…do that until the animation runs as expected.

So the same for the transitions…transition one property, if that works, add the next.

[Author]

Posts