add animations to be used for text
This commit is contained in:
parent
c6ac8f1836
commit
98386d6a0e
1 changed files with 55 additions and 1 deletions
56
bundle.css
56
bundle.css
|
|
@ -130,7 +130,7 @@ header {
|
|||
|
||||
@keyframes spinin {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
transform: translateX(-100%) translateY(-100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(0px);
|
||||
|
|
@ -238,6 +238,60 @@ footer p,hr,div {
|
|||
font-size: 3rem;
|
||||
}
|
||||
|
||||
/*
|
||||
* animations
|
||||
*/
|
||||
.spin {
|
||||
animation: spin 2s infinite linear;
|
||||
display: inline-block;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.hue-change {
|
||||
animation: hue-change 2s infinite linear;
|
||||
display: inline-block;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.size-big-small {
|
||||
animation: size-big-small 2s infinite linear;
|
||||
display: inline-block;
|
||||
color: orange;
|
||||
}
|
||||
|
||||
@keyframes hue-change {
|
||||
from {
|
||||
filter: hue-rotate(0deg);
|
||||
}
|
||||
to {
|
||||
filter: hue-rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes size-big-small {
|
||||
from {
|
||||
transform: scale(1);
|
||||
}
|
||||
40% {
|
||||
transform: scale(2);
|
||||
}
|
||||
80% {
|
||||
transform: scale(0.75);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* responsive webpage
|
||||
*/
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue