-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcssAnim.html
39 lines (29 loc) · 1.19 KB
/
cssAnim.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<html>
<!-- thanks https://stackoverflow.com/a/53882402 ( and ig https://jsfiddle.net/gionaf/SNycF/ ) -->
<head>
<style>
body {
font-family: "Noto Sans", Arial, sans-serif;
}
div {
font-size: 2.5em;
}
div span {
background: linear-gradient(#1a1a1b,#1a1a1b) left no-repeat, rgba(0, 0, 0, 0);
background-size:0% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation:loading 200s ease-in alternate infinite;
}
@keyframes loading {
0% { background-size: 0% 100%; }
40% { background-size: 100% 100%; }
60% { background-size: 100% 100%; }
100% { background-size: 0% 100%; }
}
</style>
<body>
<div>
<span>
Real live bus driver here! Only been driving for 2 years though. As said already on here we all wish passengers would have their form of payment ready as it slows us down a hell of a lot when you don't. More importantly for me though is don't give me death stares or even a smart arse comment because the bus is late. I pride myself on being on time as much as possible and having good statistics on KPI's so when I'm not on time it's because of shitty traffic, time consuming interactions with people or an impossible schedule.