html - CSS3 animation direction not working -


I have an extended line animation on my site using CSS3. It was created using the key frame on the width of the div, and naturally it is expanding from left to right though I want to extend it right from left to 'reverse' in animation direction Try but without joy Any ideas why? Thank you.

This is my baby

css

  .line_left {height: 6px; Width: 32 VV; Background color: black; Margin-top: 300px; Margin-left: 40px; Boundary-radius: 5px; Swim left; Webkit-Animation: Extension 2S; / * Chrome, Safari, Opera * / Animation: Extension 2S; } {* Width: 0vw;} to {width: 32vw;}} / * standard syntax * / @ keyframe extension {{width: 0vw;} to {width:} from Chrome, Safari, Opera * / @ -webkit- 32vw;}} UPDATE, it has been clarified, it is difficult to see what is trying to achieve. Here the site is an image of the logo, and the lines are from the center. Need to animate out  

explanation

Your problem is not with animation, this is how the element is located on the page; Since this is float: left , this is probably going to stay on the left side. If you change it to float: correct , then it will proceed as far as possible and extend to the left.

If you want your extension bar on the right side of the page, you can add it to a & lt; Div & gt; and look at the situation you want, in which I set the container width and by giving it margin: 0 auto .

Edit I'm focusing the extended bar: If you want to fully "leave" the expanded band effectively, it's a and < div> gt; Use the above technique of wrapping in , which, except the width of div , and leaving it, excluding it.

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -