|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="hendry sadrak"> |
|
|
|
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
|
|
|
|
|
|
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" /> |
|
|
|
|
|
<meta name="apple-mobile-web-app-title" content="CodePen"> |
|
|
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" /> |
|
|
|
|
|
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111" /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script> |
|
|
|
|
|
|
|
|
<title>#webdev series - Colorful text animation #updated</title> |
|
|
|
|
|
<link rel="canonical" href="https://codepen.io/hendrysadrak/pen/VLMOMJ"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> |
|
|
|
|
|
|
|
|
|
|
|
<style> |
|
|
/* |
|
|
* Animation module with all animation code |
|
|
*/ |
|
|
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300); |
|
|
.anim-text-flow, |
|
|
.anim-text-flow-hover:hover { |
|
|
/* |
|
|
* Animation variables |
|
|
*/ |
|
|
/* |
|
|
* Elements settings |
|
|
*/ |
|
|
/* |
|
|
* Keyframe loop |
|
|
*/ |
|
|
/* |
|
|
* Element animation delay loop |
|
|
*/ |
|
|
} |
|
|
.anim-text-flow span, |
|
|
.anim-text-flow-hover:hover span { |
|
|
-webkit-animation-name: anim-text-flow-keys; |
|
|
animation-name: anim-text-flow-keys; |
|
|
-webkit-animation-duration: 50s; |
|
|
animation-duration: 50s; |
|
|
-webkit-animation-iteration-count: infinite; |
|
|
animation-iteration-count: infinite; |
|
|
-webkit-animation-direction: alternate; |
|
|
animation-direction: alternate; |
|
|
-webkit-animation-fill-mode: forwards; |
|
|
animation-fill-mode: forwards; |
|
|
} |
|
|
@-webkit-keyframes anim-text-flow-keys { |
|
|
0% { |
|
|
color: #5c74d6; |
|
|
} |
|
|
5% { |
|
|
color: #d67e5c; |
|
|
} |
|
|
10% { |
|
|
color: #be5cd6; |
|
|
} |
|
|
15% { |
|
|
color: #5cadd6; |
|
|
} |
|
|
20% { |
|
|
color: #9f5cd6; |
|
|
} |
|
|
25% { |
|
|
color: #5cd695; |
|
|
} |
|
|
30% { |
|
|
color: #d6995c; |
|
|
} |
|
|
35% { |
|
|
color: #ab5cd6; |
|
|
} |
|
|
40% { |
|
|
color: #5cbed6; |
|
|
} |
|
|
45% { |
|
|
color: #bad65c; |
|
|
} |
|
|
50% { |
|
|
color: #725cd6; |
|
|
} |
|
|
55% { |
|
|
color: #5cadd6; |
|
|
} |
|
|
60% { |
|
|
color: #d6815c; |
|
|
} |
|
|
65% { |
|
|
color: #5c6cd6; |
|
|
} |
|
|
70% { |
|
|
color: #d65c6c; |
|
|
} |
|
|
75% { |
|
|
color: #5cd4d6; |
|
|
} |
|
|
80% { |
|
|
color: #5cafd6; |
|
|
} |
|
|
85% { |
|
|
color: #7c5cd6; |
|
|
} |
|
|
90% { |
|
|
color: #725cd6; |
|
|
} |
|
|
95% { |
|
|
color: #5cd69b; |
|
|
} |
|
|
100% { |
|
|
color: #765cd6; |
|
|
} |
|
|
} |
|
|
@keyframes anim-text-flow-keys { |
|
|
0% { |
|
|
color: #5c74d6; |
|
|
} |
|
|
5% { |
|
|
color: #d67e5c; |
|
|
} |
|
|
10% { |
|
|
color: #be5cd6; |
|
|
} |
|
|
15% { |
|
|
color: #5cadd6; |
|
|
} |
|
|
20% { |
|
|
color: #9f5cd6; |
|
|
} |
|
|
25% { |
|
|
color: #5cd695; |
|
|
} |
|
|
30% { |
|
|
color: #d6995c; |
|
|
} |
|
|
35% { |
|
|
color: #ab5cd6; |
|
|
} |
|
|
40% { |
|
|
color: #5cbed6; |
|
|
} |
|
|
45% { |
|
|
color: #bad65c; |
|
|
} |
|
|
50% { |
|
|
color: #725cd6; |
|
|
} |
|
|
55% { |
|
|
color: #5cadd6; |
|
|
} |
|
|
60% { |
|
|
color: #d6815c; |
|
|
} |
|
|
65% { |
|
|
color: #5c6cd6; |
|
|
} |
|
|
70% { |
|
|
color: #d65c6c; |
|
|
} |
|
|
75% { |
|
|
color: #5cd4d6; |
|
|
} |
|
|
80% { |
|
|
color: #5cafd6; |
|
|
} |
|
|
85% { |
|
|
color: #7c5cd6; |
|
|
} |
|
|
90% { |
|
|
color: #725cd6; |
|
|
} |
|
|
95% { |
|
|
color: #5cd69b; |
|
|
} |
|
|
100% { |
|
|
color: #765cd6; |
|
|
} |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(1), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(1) { |
|
|
-webkit-animation-delay: -19.8s; |
|
|
animation-delay: -19.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(2), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(2) { |
|
|
-webkit-animation-delay: -19.6s; |
|
|
animation-delay: -19.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(3), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(3) { |
|
|
-webkit-animation-delay: -19.4s; |
|
|
animation-delay: -19.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(4), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(4) { |
|
|
-webkit-animation-delay: -19.2s; |
|
|
animation-delay: -19.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(5), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(5) { |
|
|
-webkit-animation-delay: -19s; |
|
|
animation-delay: -19s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(6), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(6) { |
|
|
-webkit-animation-delay: -18.8s; |
|
|
animation-delay: -18.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(7), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(7) { |
|
|
-webkit-animation-delay: -18.6s; |
|
|
animation-delay: -18.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(8), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(8) { |
|
|
-webkit-animation-delay: -18.4s; |
|
|
animation-delay: -18.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(9), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(9) { |
|
|
-webkit-animation-delay: -18.2s; |
|
|
animation-delay: -18.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(10), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(10) { |
|
|
-webkit-animation-delay: -18s; |
|
|
animation-delay: -18s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(11), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(11) { |
|
|
-webkit-animation-delay: -17.8s; |
|
|
animation-delay: -17.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(12), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(12) { |
|
|
-webkit-animation-delay: -17.6s; |
|
|
animation-delay: -17.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(13), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(13) { |
|
|
-webkit-animation-delay: -17.4s; |
|
|
animation-delay: -17.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(14), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(14) { |
|
|
-webkit-animation-delay: -17.2s; |
|
|
animation-delay: -17.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(15), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(15) { |
|
|
-webkit-animation-delay: -17s; |
|
|
animation-delay: -17s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(16), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(16) { |
|
|
-webkit-animation-delay: -16.8s; |
|
|
animation-delay: -16.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(17), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(17) { |
|
|
-webkit-animation-delay: -16.6s; |
|
|
animation-delay: -16.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(18), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(18) { |
|
|
-webkit-animation-delay: -16.4s; |
|
|
animation-delay: -16.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(19), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(19) { |
|
|
-webkit-animation-delay: -16.2s; |
|
|
animation-delay: -16.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(20), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(20) { |
|
|
-webkit-animation-delay: -16s; |
|
|
animation-delay: -16s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(21), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(21) { |
|
|
-webkit-animation-delay: -15.8s; |
|
|
animation-delay: -15.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(22), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(22) { |
|
|
-webkit-animation-delay: -15.6s; |
|
|
animation-delay: -15.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(23), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(23) { |
|
|
-webkit-animation-delay: -15.4s; |
|
|
animation-delay: -15.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(24), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(24) { |
|
|
-webkit-animation-delay: -15.2s; |
|
|
animation-delay: -15.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(25), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(25) { |
|
|
-webkit-animation-delay: -15s; |
|
|
animation-delay: -15s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(26), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(26) { |
|
|
-webkit-animation-delay: -14.8s; |
|
|
animation-delay: -14.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(27), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(27) { |
|
|
-webkit-animation-delay: -14.6s; |
|
|
animation-delay: -14.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(28), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(28) { |
|
|
-webkit-animation-delay: -14.4s; |
|
|
animation-delay: -14.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(29), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(29) { |
|
|
-webkit-animation-delay: -14.2s; |
|
|
animation-delay: -14.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(30), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(30) { |
|
|
-webkit-animation-delay: -14s; |
|
|
animation-delay: -14s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(31), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(31) { |
|
|
-webkit-animation-delay: -13.8s; |
|
|
animation-delay: -13.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(32), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(32) { |
|
|
-webkit-animation-delay: -13.6s; |
|
|
animation-delay: -13.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(33), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(33) { |
|
|
-webkit-animation-delay: -13.4s; |
|
|
animation-delay: -13.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(34), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(34) { |
|
|
-webkit-animation-delay: -13.2s; |
|
|
animation-delay: -13.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(35), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(35) { |
|
|
-webkit-animation-delay: -13s; |
|
|
animation-delay: -13s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(36), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(36) { |
|
|
-webkit-animation-delay: -12.8s; |
|
|
animation-delay: -12.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(37), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(37) { |
|
|
-webkit-animation-delay: -12.6s; |
|
|
animation-delay: -12.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(38), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(38) { |
|
|
-webkit-animation-delay: -12.4s; |
|
|
animation-delay: -12.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(39), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(39) { |
|
|
-webkit-animation-delay: -12.2s; |
|
|
animation-delay: -12.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(40), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(40) { |
|
|
-webkit-animation-delay: -12s; |
|
|
animation-delay: -12s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(41), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(41) { |
|
|
-webkit-animation-delay: -11.8s; |
|
|
animation-delay: -11.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(42), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(42) { |
|
|
-webkit-animation-delay: -11.6s; |
|
|
animation-delay: -11.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(43), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(43) { |
|
|
-webkit-animation-delay: -11.4s; |
|
|
animation-delay: -11.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(44), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(44) { |
|
|
-webkit-animation-delay: -11.2s; |
|
|
animation-delay: -11.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(45), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(45) { |
|
|
-webkit-animation-delay: -11s; |
|
|
animation-delay: -11s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(46), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(46) { |
|
|
-webkit-animation-delay: -10.8s; |
|
|
animation-delay: -10.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(47), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(47) { |
|
|
-webkit-animation-delay: -10.6s; |
|
|
animation-delay: -10.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(48), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(48) { |
|
|
-webkit-animation-delay: -10.4s; |
|
|
animation-delay: -10.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(49), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(49) { |
|
|
-webkit-animation-delay: -10.2s; |
|
|
animation-delay: -10.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(50), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(50) { |
|
|
-webkit-animation-delay: -10s; |
|
|
animation-delay: -10s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(51), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(51) { |
|
|
-webkit-animation-delay: -9.8s; |
|
|
animation-delay: -9.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(52), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(52) { |
|
|
-webkit-animation-delay: -9.6s; |
|
|
animation-delay: -9.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(53), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(53) { |
|
|
-webkit-animation-delay: -9.4s; |
|
|
animation-delay: -9.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(54), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(54) { |
|
|
-webkit-animation-delay: -9.2s; |
|
|
animation-delay: -9.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(55), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(55) { |
|
|
-webkit-animation-delay: -9s; |
|
|
animation-delay: -9s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(56), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(56) { |
|
|
-webkit-animation-delay: -8.8s; |
|
|
animation-delay: -8.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(57), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(57) { |
|
|
-webkit-animation-delay: -8.6s; |
|
|
animation-delay: -8.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(58), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(58) { |
|
|
-webkit-animation-delay: -8.4s; |
|
|
animation-delay: -8.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(59), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(59) { |
|
|
-webkit-animation-delay: -8.2s; |
|
|
animation-delay: -8.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(60), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(60) { |
|
|
-webkit-animation-delay: -8s; |
|
|
animation-delay: -8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(61), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(61) { |
|
|
-webkit-animation-delay: -7.8s; |
|
|
animation-delay: -7.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(62), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(62) { |
|
|
-webkit-animation-delay: -7.6s; |
|
|
animation-delay: -7.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(63), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(63) { |
|
|
-webkit-animation-delay: -7.4s; |
|
|
animation-delay: -7.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(64), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(64) { |
|
|
-webkit-animation-delay: -7.2s; |
|
|
animation-delay: -7.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(65), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(65) { |
|
|
-webkit-animation-delay: -7s; |
|
|
animation-delay: -7s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(66), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(66) { |
|
|
-webkit-animation-delay: -6.8s; |
|
|
animation-delay: -6.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(67), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(67) { |
|
|
-webkit-animation-delay: -6.6s; |
|
|
animation-delay: -6.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(68), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(68) { |
|
|
-webkit-animation-delay: -6.4s; |
|
|
animation-delay: -6.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(69), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(69) { |
|
|
-webkit-animation-delay: -6.2s; |
|
|
animation-delay: -6.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(70), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(70) { |
|
|
-webkit-animation-delay: -6s; |
|
|
animation-delay: -6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(71), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(71) { |
|
|
-webkit-animation-delay: -5.8s; |
|
|
animation-delay: -5.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(72), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(72) { |
|
|
-webkit-animation-delay: -5.6s; |
|
|
animation-delay: -5.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(73), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(73) { |
|
|
-webkit-animation-delay: -5.4s; |
|
|
animation-delay: -5.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(74), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(74) { |
|
|
-webkit-animation-delay: -5.2s; |
|
|
animation-delay: -5.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(75), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(75) { |
|
|
-webkit-animation-delay: -5s; |
|
|
animation-delay: -5s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(76), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(76) { |
|
|
-webkit-animation-delay: -4.8s; |
|
|
animation-delay: -4.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(77), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(77) { |
|
|
-webkit-animation-delay: -4.6s; |
|
|
animation-delay: -4.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(78), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(78) { |
|
|
-webkit-animation-delay: -4.4s; |
|
|
animation-delay: -4.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(79), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(79) { |
|
|
-webkit-animation-delay: -4.2s; |
|
|
animation-delay: -4.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(80), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(80) { |
|
|
-webkit-animation-delay: -4s; |
|
|
animation-delay: -4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(81), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(81) { |
|
|
-webkit-animation-delay: -3.8s; |
|
|
animation-delay: -3.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(82), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(82) { |
|
|
-webkit-animation-delay: -3.6s; |
|
|
animation-delay: -3.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(83), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(83) { |
|
|
-webkit-animation-delay: -3.4s; |
|
|
animation-delay: -3.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(84), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(84) { |
|
|
-webkit-animation-delay: -3.2s; |
|
|
animation-delay: -3.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(85), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(85) { |
|
|
-webkit-animation-delay: -3s; |
|
|
animation-delay: -3s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(86), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(86) { |
|
|
-webkit-animation-delay: -2.8s; |
|
|
animation-delay: -2.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(87), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(87) { |
|
|
-webkit-animation-delay: -2.6s; |
|
|
animation-delay: -2.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(88), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(88) { |
|
|
-webkit-animation-delay: -2.4s; |
|
|
animation-delay: -2.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(89), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(89) { |
|
|
-webkit-animation-delay: -2.2s; |
|
|
animation-delay: -2.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(90), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(90) { |
|
|
-webkit-animation-delay: -2s; |
|
|
animation-delay: -2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(91), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(91) { |
|
|
-webkit-animation-delay: -1.8s; |
|
|
animation-delay: -1.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(92), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(92) { |
|
|
-webkit-animation-delay: -1.6s; |
|
|
animation-delay: -1.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(93), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(93) { |
|
|
-webkit-animation-delay: -1.4s; |
|
|
animation-delay: -1.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(94), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(94) { |
|
|
-webkit-animation-delay: -1.2s; |
|
|
animation-delay: -1.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(95), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(95) { |
|
|
-webkit-animation-delay: -1s; |
|
|
animation-delay: -1s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(96), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(96) { |
|
|
-webkit-animation-delay: -0.8s; |
|
|
animation-delay: -0.8s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(97), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(97) { |
|
|
-webkit-animation-delay: -0.6s; |
|
|
animation-delay: -0.6s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(98), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(98) { |
|
|
-webkit-animation-delay: -0.4s; |
|
|
animation-delay: -0.4s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(99), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(99) { |
|
|
-webkit-animation-delay: -0.2s; |
|
|
animation-delay: -0.2s; |
|
|
} |
|
|
.anim-text-flow span:nth-of-type(100), |
|
|
.anim-text-flow-hover:hover span:nth-of-type(100) { |
|
|
-webkit-animation-delay: 0s; |
|
|
animation-delay: 0s; |
|
|
} |
|
|
|
|
|
body { |
|
|
background-color: #1a1a1a; |
|
|
color: #fefefe; |
|
|
font-family: "Ubuntu"; |
|
|
text-transform: uppercase; |
|
|
letter-spacing: 0.2em; |
|
|
font-size: 1.3em; |
|
|
line-height: 2; |
|
|
font-weight: 300; |
|
|
text-rendering: optimizeLegibility; |
|
|
text-align: center; |
|
|
} |
|
|
|
|
|
.container { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
width: 100%; |
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
|
|
|
.txt { |
|
|
display: block; |
|
|
} |
|
|
|
|
|
a { |
|
|
text-decoration: none; |
|
|
position: absolute; |
|
|
bottom: 10px; |
|
|
right: 10px; |
|
|
text-align: right; |
|
|
color: #eee; |
|
|
font-size: 15px; |
|
|
line-height: 15px; |
|
|
} |
|
|
</style> |
|
|
|
|
|
<script> |
|
|
window.console = window.console || function(t) {}; |
|
|
</script> |
|
|
|
|
|
|
|
|
|
|
|
</head> |
|
|
|
|
|
<body translate="no"> |
|
|
<div class="container"> |
|
|
<span class="txt anim-text-flow">How are you? Bacon ipsum dolor sit amet.</span> |
|
|
</div> |
|
|
|
|
|
<a target="_blank" href="https://www.hendrysadrak.com">@hendrysadrak</a> |
|
|
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> |
|
|
<script id="rendered-js" > |
|
|
$('.txt').html(function (i, html) { |
|
|
var chars = $.trim(html).split(""); |
|
|
|
|
|
return '<span>' + chars.join('</span><span>') + '</span>'; |
|
|
}); |
|
|
//# sourceURL=pen.js |
|
|
</script> |
|
|
|
|
|
|
|
|
</body> |
|
|
|
|
|
</html> |
|
|
|
