-1

I am trying to make the css for right to left div when it will open but i dont want use any java script and jquery only need pure css.

enter image description here

  • Maybe you could use key-frames. See this answer for example: http://stackoverflow.com/questions/6805482/css3-transition-animation-on-load – lia ant Nov 11 '16 at 17:08
  • Sorry but this is not what i was looking –  Nov 11 '16 at 17:19
  • i need the exactly i draw the picture –  Nov 11 '16 at 17:19
  • Please explain your problem more clearly. –  Nov 11 '16 at 17:24
  • see the picture there is a navigation and when i will click on that content should box should be come from right side and current content section should be go left side –  Nov 11 '16 at 17:27

1 Answers1

0

You could use a CSS animation over the clip property

Codepen Demo

Markup

<section>
  <div>
    <h1>Right to Left opening</h1>
  </div>
</div>

CSS

section { 
  position: relative;
}

div { 
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;  
  background: #6698F5;
  clip: rect(0, 100vw, auto, 100vw);
  animation: slide 1.5s linear 1s forwards; 
}

@keyframes slide {
  100% { clip: rect(0, 100vw, auto, 0); }
}
Fabrizio Calderan
  • 120,726
  • 26
  • 164
  • 177
  • can you make like a design i attached you are almost there but its not complete working i need the section are in container and a navigation –  Nov 11 '16 at 17:35
  • I gave you an idea about how to obtain the effect, just apply it to your code – Fabrizio Calderan Nov 11 '16 at 17:37
  • but if i will go in next like i am on homepage and now i want to go for about us the previews content area should be hidden for left side and new content area will come from right side –  Nov 11 '16 at 17:39
  • @BhupinderKumar The question has been answered, SO is not here to design or do your work for you. – Ricky Nov 11 '16 at 21:21
  • I've just reported the OP for plagiarism. He copied my full answer without giving attribution and he posted the answer with another account. Then he accepted (and probably also upvoted) his own answer. I do believe this is an unfair and disrespectful behaviour. – Fabrizio Calderan Nov 16 '16 at 13:30