84 lines
1.1 KiB
CSS
84 lines
1.1 KiB
CSS
|
@keyframes cssrocks {
|
||
|
from { background-color: yellow; }
|
||
|
to { background-color: red; }
|
||
|
}
|
||
|
|
||
|
box {
|
||
|
background-color: blue;
|
||
|
animation-fill-mode: both;
|
||
|
animation-duration: 100s;
|
||
|
padding: 1px;
|
||
|
background-clip: content-box;
|
||
|
animation-timing-function: linear;
|
||
|
}
|
||
|
|
||
|
.after {
|
||
|
animation-name: cssrocks;
|
||
|
animation-delay: -10000s;
|
||
|
}
|
||
|
|
||
|
.before {
|
||
|
animation-name: cssrocks;
|
||
|
animation-delay: 10000s;
|
||
|
}
|
||
|
|
||
|
.normal {
|
||
|
animation-direction: normal;
|
||
|
}
|
||
|
|
||
|
.reverse {
|
||
|
animation-direction: reverse;
|
||
|
}
|
||
|
|
||
|
.alternate {
|
||
|
animation-direction: alternate;
|
||
|
}
|
||
|
|
||
|
.alternate-reverse {
|
||
|
animation-direction: alternate-reverse;
|
||
|
}
|
||
|
|
||
|
.x0 {
|
||
|
animation-iteration-count: 0;
|
||
|
}
|
||
|
|
||
|
.x02 {
|
||
|
animation-iteration-count: 0.2;
|
||
|
}
|
||
|
|
||
|
.x1 {
|
||
|
animation-iteration-count: 1;
|
||
|
}
|
||
|
|
||
|
.x12 {
|
||
|
animation-iteration-count: 1.2;
|
||
|
}
|
||
|
|
||
|
.x2 {
|
||
|
animation-iteration-count: 2;
|
||
|
}
|
||
|
|
||
|
.x22 {
|
||
|
animation-iteration-count: 2.2;
|
||
|
}
|
||
|
|
||
|
.yellow {
|
||
|
animation: none;
|
||
|
background-color: yellow;
|
||
|
}
|
||
|
|
||
|
.red {
|
||
|
animation: none;
|
||
|
background-color: red;
|
||
|
}
|
||
|
|
||
|
.darkorange {
|
||
|
animation: none;
|
||
|
background-color: rgb(255,51,0);
|
||
|
}
|
||
|
|
||
|
.lightorange {
|
||
|
animation: none;
|
||
|
background-color: rgb(255,204,0);
|
||
|
}
|