CSS Border Transition On Page Load? - html

Question

I would like to make a timed border draw animation once my page is loaded. I basically want the border of the div container to be hidden and then have the container border drawn through a transition, triggered by the page being loaded (without hovering). I was able to find how to do this upon hovering, but I can't figure out how to do it upon page load. How would I implement that into the following code?
<div id="profile-content">
Insert Content Here
</div>
#profile-content
{
border: 3px solid;
border-color: #FFFFFF;
padding: 4em 4em 4em 14em;
margin: 0 0 0 4em;
}

Answer 1

There are many ways to look into the border transition, I just showed a couple.
Source
There is a property transition and it accepts the seconds as parameters to give you the effect.
#profile-content {
outline: solid 5px #FC5185;
transition: outline 0.6s linear;
margin: 0.5em;
}
#profile-content:hover {
outline-width: 10px;
}
<div id="profile-content">
Insert Content Here
</div>
OR
Div border transition:
div {
background: none;
border: 0;
box-sizing: border-box;
margin: 1em;
padding: 1em 2em;
box-shadow: inset 0 0 0 2px #f45e61;
color: #f45e61;
font-size: inherit;
font-weight: 700;
position: relative;
vertical-align: middle;
width: auto;
}
div::before,
div::after {
box-sizing: inherit;
content: '';
position: absolute;
width: 100%;
height: 100%;
}
#profile-content {
-webkit-transition: color 0.25s;
transition: color 0.25s;
}
#profile-content::before,
#profile-content::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
#profile-content::before {
top: 0;
left: 0;
}
#profile-content::after {
bottom: 0;
right: 0;
}
#profile-content:hover {
color: Teal;
}
#profile-content:hover::before,
#profile-content:hover::after {
width: 100%;
height: 100%;
}
#profile-content:hover::before {
border-top-color: black;
border-right-color: black;
-webkit-transition: width 1s ease-out, height 0.25s ease-out 0.25s;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
#profile-content:hover::after {
border-bottom-color: black;
border-left-color: black;
-webkit-transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
<div id="profile-content">
Insert Content Here
</div>