Fill in the bar?

Asked

Viewed 88 times

3

How do I so that when I open the site with this code, it already "fills" this bar and remains filled, without me having to stay with the mouse on top?

div {
    width: 50px;
    height: 50px;
    background: red;
    -webkit-transform: width 2s; /* Safari */
    transition: width 2s;
	border-radius: 100px;
}

/* For Safari 3.1 to 6.0 */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-transform-timing-function: ease;}
#div3 {-webkit-transform-timing-function: ease-in;}
#div4 {-webkit-transform-timing-function: ease-out;}
#div5 {-webkit-transform-timing-function: ease-in-out;}

/* Standard syntax */
#div1 {transform-timing-function: linear;}
#div2 {transform-timing-function: ease;}
#div3 {transform-timing-function: ease-in;}
#div4 {transform-timing-function: ease-out;}
#div5 {transform-timing-function: ease-in-out;}

div:hover {
    width: 50%;
}
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div><br>

<p>Hover over the div elements above, to see the different speed curves.</p>

</body>

html css

1 answer

6

It’s quite simple, Rigger responsible for the animation in its code is the hover, ie, will only run the animation when passing the mouse. To do while the page opens, just create a keyframe.

I also added different lengths for you to better understand.

div {
    width: 50%;
    height: 50px;
    background: red;
    animation-name: animacao;
    border-radius: 100px;
}

#div1 {
  animation-duration: 2s;
}

#div2 {
  animation-duration: 5s;
}

#div3 {
  animation-duration: 10s;
}

#div4 {
  animation-duration: 15s;
}

#div5 {
  animation-duration: 30s;
}

@keyframes animacao {
    from {width: 50px;}
    to {width: 50%;}
}
<div id="div1"></div><br>
<div id="div2"></div><br>
<div id="div3"></div><br>
<div id="div4"></div><br>
<div id="div5"></div><br>

You can read more about animations here.

  • Thank you so much for your attention, friend, that’s just what I needed.

  • @Fabio cool that I could help you, just be sure to accept my answer as the best answer :)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.