In some cases it is needed to start animations on a website. If you are looking for some code you will find a lot of JavaScript solutions, but in my mind this is not the right way. JavaScript should be there for the logic, getting data and working with it and not for UI stuff. So there needs to be a solution without JavaScript.
In this case: a div with background-color.. the color should change, after it is displayed.
1
2
3
4
| <div class="container1">
<div class="container2">
</div>
</div>
|
As you can see, they are using classes for the design. So lets get to the CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| .container1{
width: 100%;
height: 50px;
}
.container2{
width:70%;
height:50px;
/* background-color is the target color */
background-color: transparent;
/* set an animation and the time it should take */
animation: container2 2s ease forwards;
}
@keyframes container2{
/* set the target color and the start color */
from { background-color: gray; }
to { background-color: transparent; }
}
|
Comments
Post a Comment