text-animations-react
Version:
A React.js and typescript package that lets you animates text and add text effects with ease with ease
344 lines (299 loc) • 7.45 kB
CSS
.container {
width: fit-content;
height: fit-content;
perspective: 1000px;
color: transparent;
backface-visibility: hidden;
}
.specialone {
cursor: pointer;
display: inline-block;
user-select: none;
line-height: 0.8;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
}
.specialone:nth-child(1) {
animation: balance 1.5s ease-out;
transform-origin: bottom left;
}
.specialone:nth-child(2) {
animation: shrinkjump 1s ease-in-out;
transform-origin: bottom center;
}
.specialone:nth-child(3) {
animation: falling 2s ease-out;
transform-origin: bottom center;
}
.specialone:nth-child(4) {
animation: rotate 1s ease-out;
}
.specialone:nth-child(5) {
animation: toplong 1.5s linear;
}
/*specialone ends here*/
/*specialtwo*/
.specialtwo {
display: inline-block;
text-shadow: 0 0 0 whitesmoke;
animation: smoky 3s both;
}
.specialtwo:nth-child(even) {
animation-name: smoky-mirror;
}
/*specialtwo ends here*/
/*specialthree*/
.specialthree {
position: relative;
top: 20px;
display: inline-block;
-webkit-animation: bounce 0.6s ease alternate;
animation: bounce 1s ease alternate;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
}
.add3d {
text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
0 5px 0 #ccc, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent,
0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, 0.4);
}
.specialthree:nth-child(2) {
-webkit-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.specialthree:nth-child(3) {
-webkit-animation-delay: 0.2s;
animation-delay: 0.2s;
}
.specialthree:nth-child(4) {
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.specialthree:nth-child(5) {
-webkit-animation-delay: 0.4s;
animation-delay: 0.4s;
}
/*specialthree ends here*/
/*specialfour*/
.specialfour {
display: inline-block;
animation: flip 2s;
}
/*specialfour ends here*/
/*specialseven ends here*/
/*one*/
.one {
display: inline-block;
opacity: 0;
transform: translate(-150px, -50px) rotate(-180deg) scale(3);
animation: revolveScale 2s forwards;
}
/*one ends here*/
/*three*/
.three {
display: inline-block;
opacity: 0;
transform: translate(0, -100px) rotate(360deg) scale(0);
animation: revolveDrop 3s forwards;
}
/*three ends here*/
/*four*/
.four {
display: inline-block;
opacity: 0;
transform: translate(-150px, 0) scale(0.3);
animation: leftRight 0.5s forwards;
}
/*four ends here */
/*keyframe and animation*/
/*specialone animations*/
@keyframes balance {
0%,
100% {
transform: rotate(0deg);
}
30%,
60% {
transform: rotate(-45deg);
}
}
@keyframes shrinkjump {
10%,
35% {
transform: scale(2, 0.2) translate(0, 0);
}
45%,
50% {
transform: scale(1) translate(0, -150px);
}
80% {
transform: scale(1) translate(0, 0);
}
}
@keyframes falling {
12% {
transform: rotateX(240deg);
}
24% {
transform: rotateX(150deg);
}
36% {
transform: rotateX(200deg);
}
48% {
transform: rotateX(175deg);
}
60%,
85% {
transform: rotateX(180deg);
}
100% {
transform: rotateX(0deg);
}
}
@keyframes rotate {
20%,
80% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
@keyframes toplong {
10%,
40% {
transform: translateY(-38vh) scaleY(1);
}
90% {
transform: translateY(-38vh) scaleY(4);
}
}
/*specialtwo animations*/
@keyframes smoky {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg)
scale(1.5);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
@keyframes smoky-mirror {
60% {
text-shadow: 0 0 40px whitesmoke;
}
to {
transform: translate3d(18rem, -8rem, 0) rotate(-40deg) skewX(-70deg)
scale(2);
text-shadow: 0 0 20px whitesmoke;
opacity: 0;
}
}
/*specialthree animations*/
@-webkit-keyframes bounce {
100% {
top: -20px;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,
0 50px 25px rgba(0, 0, 0, 0.2);
}
}
@keyframes bounce {
100% {
top: -20px;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #ccc, 0 3px 0 #ccc, 0 4px 0 #ccc,
0 5px 0 #ccc, 0 6px 0 #ccc, 0 7px 0 #ccc, 0 8px 0 #ccc, 0 9px 0 #ccc,
0 50px 25px rgba(0, 0, 0, 0.2);
}
}
/*specialfour animation*/
@keyframes flip {
0%,
80% {
transform: rotateY(360deg);
}
}
/*specialsix animation*/
@keyframes scaling {
20% {
text-shadow: 0px 0 #e8332e, 0px 0 #fc9e05, 0px 0 #891696;
transform: scale(0.9, 1) rotatey(-10deg);
}
40% {
transform: scale(0.9, 2) translatey(16px);
text-shadow: -10px 0px #e8332e, -20px 0 #fc9e05, -30px 0 #891696;
}
60% {
transform: scale(0.9, 1) rotatey(-5deg);
text-shadow: 0px 0 #e8332e, 0px 0 #fc9e05, 0px 0 #891696;
}
80% {
transform: scale(0.9, 2) translatey(16px);
text-shadow: 10px 0px #e8332e, 20px 0 #fc9e05, 30px 0 #891696;
}
}
@keyframes jump {
20% {
transform: translatey(0) scale(0);
opacity: 0;
}
40% {
transform: translatey(-50px) scale(1);
opacity: 1;
}
60% {
transform: translatey(0) scale(0);
opacity: 0;
}
80% {
transform: translatey(-50px) scale(1);
opacity: 1;
}
}
/*one animation*/
@keyframes revolveScale {
60% {
transform: translate(20px, 20px) rotate(30deg) scale(0.3);
}
100% {
transform: translate(0) rotate(0) scale(1);
opacity: 1;
}
}
/*three animation*/
@keyframes revolveDrop {
30% {
transform: translate(0, -50px) rotate(180deg) scale(1);
}
60% {
transform: translate(0, 20px) scale(0.8) rotate(0deg);
}
100% {
transform: translate(0) scale(1) rotate(0deg);
opacity: 1;
}
}
/*four animation*/
@keyframes leftRight {
40% {
transform: translate(50px, 0) scale(0.7);
opacity: 1;
color: #348c04;
}
60% {
color: #0f40ba;
}
80% {
transform: translate(0) scale(2);
opacity: 0;
}
100% {
transform: translate(0) scale(1);
opacity: 1;
}
}