I have a loader and i try to it disappear after 3 second but my code doesn't run. How to fix the problem ? i think it is my keyframes. Here is my css code. Thank for your help.
.loader
{
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
margin: 250px 0 0 130px;
}
.loader:before, .loader:after
{
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border-radius: 100%;
border: 10px solid transparent;
border-top-color: #9356DC;
display: none;
}
.loader:before
{
z-index: 100;
animation: spin 1s infinite;
}
.loader:after
{
border: 10px solid #FF79DA;
}
@keyframes spin{
0%{
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
type here
I tried to add à keyframes but my keyframes doesn't run. I don't understant why.
This is the html code :
<div ></div>
Thank you matias
CodePudding user response:
This is the html code :
<div ></div>
CodePudding user response:
you just have to use the loader
animation in the .loader
class
.loader
{
background: red;
width: 100px;
height: 100px;
border-radius: 100%;
position: absolute;
margin: 250px 0 0 130px;
animation: loader 3s forwards; /* here */
}
.loader:before, .loader:after
{
content: "";
position: absolute;
top: -10px;
left: -10px;
width: 100%;
height: 100%;
border-radius: 100%;
border: 10px solid transparent;
border-top-color: red;
}
.loader:before
{
z-index: 100;
animation: spin 1s infinite;
}
.loader:after
{
border: 10px solid green;
}
@keyframes spin{
0%{
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader{
0%{
opacity: 1;
}
100%{
opacity: 0;
}
}
<div ></div>