How to not use jQuery to animate width of a div?

Question

Below is my css code

.page1 {
  width: 0%; }

.page2 {
  width: 0%; }

Below is jQuery syntax

$('.page2').animate({
        width: "10%"
    });

when I change my webpage to page2 from page1 , one of div of this page will change its width because the class of this div is change to .page2 which original is .page1.

and with jQuery syntax above, the div will have animate effect.

My question is, can I do same thing without jQuery?

I change my css code to :

.page1 {
  width: 0%;
  transition: width 2s; }

.page2 {
  width: 0%;
  transition: width 2s; }

but nothing happened.

Please add Live Demo. means, please add runnable code,so we can understand more, what you want to say. — Shurvir Mori, Jan 13 '16 at 06:01
Also how your classes `page1/2` are chnaged, are those click events or hover events? What causes the change in classes? Kindly elaborate more. — divy3993, Jan 13 '16 at 06:08
@divy3993: there is no click event and hover. Just change to another page and in that page the class of div is .page2 not .page1 — Dreams, Jan 13 '16 at 06:35

score 2 · Accepted Answer · edited May 23 '17 at 12:31

2

Do you mean you want to animate .page1 and .page1 when the page loads? If yes then you can refer to my solution using css animation.

DEMO

@keyframes animateWidth {
    0% {width: 0%; height: 10px;}
    50% {width: 100%; height: 10px;}
    100% {width: 100%; height: 300px;}
}

Just create an animation using CSS animate and once the page loads the animation will begin.

You can't use CSS transition to control page load animation, as far as I know all browsers respond to that differently. Your safer solution would be using animation instead.

For other workarounds you can refer to here:

Using CSS for fade-in effect on page load

edited May 23 '17 at 12:31

Community

1
1

answered Jan 13 '16 at 06:38

Vincent1989

1,593
2
13
25

Thank for help.One more question, what is if I have two or three or more page , I need to write more @keyframes for each page, right? – Dreams Jan 13 '16 at 07:05
@aBloomer, no, not at all the reason you are using keyframes animation and given a name (animateWidth) is because it can be reuse over and over again. so if your second and third page is using the exact same animation then just need to reference the name will do, less code, faster and efficient loading and very easy to implement..... – Vincent1989 Jan 13 '16 at 07:17
Thanks. If the the animation is different, i need to create new one ,right?for example, width:10% for page1, 20% for page2 and so on. – Dreams Jan 13 '16 at 07:20
@aBloomer Yes that you have to create a new one. – Vincent1989 Jan 13 '16 at 07:26

score 1 · Answer 2 · answered Jan 13 '16 at 06:30

Try this:

HTML

<div class="animated">Boca Juniors</div>

CSS

.animated {
  /* just for demo */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 3px solid steelblue;
  background: gold;
  font-weight: bold;
  color: steelblue;

  /* Transition */
  -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */
  transition: width 2s;
  width: 100%;
}
.animated:hover {
  width: 50%;
}

DEMO

How to not use jQuery to animate width of a div?

2 Answers2