-
Notifications
You must be signed in to change notification settings - Fork 7
/
write-on.css
102 lines (90 loc) · 3.64 KB
/
write-on.css
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/* Demo Styles */
/* This is the containing <div> element */
#write-on {
height: 203px;
margin: 1em auto 0 auto;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 0 0;
-webkit-mask-image: url("./images/mask.png");
mask-image: url("./images/mask.png");
width: 490px;
}
#write-on.play {
-webkit-animation: write-on 2.1s 1;
/* Setting this fill-mode keeps the animation from returning to 0% when it ends */
-webkit-animation-fill-mode: both;
}
#write-on.loop {
-webkit-animation: write-on 2.1s infinite;
/* This creates the forward-backward animation when this is looped */
-webkit-animation-direction: alternate;
}
/* This is the text
NOTE: In this demo I'm revealing text with the mask, but anything could be
reveal; background color, gradient, background image, etc.
*/
h1 {
font-family: 'reklame-script';
font-size: 10em;
font-weight: 400;
margin: 0;
padding: 0;
text-shadow: #000 2px 2px 1px;
height: 203px;
width: 490px;
}
/* The ! is a different color */
h1 i {
color: #ff00ae;
font-style: normal;
}
/* Having each step in this animation advance by 4 tenths of a percent is what
allows it to play with no interpolation between steps.
*/
@-webkit-keyframes write-on {
0%, 2.2% { -webkit-mask-position: 0 0; }
2.2001%, 4% { -webkit-mask-position: 0 -203px; }
4.0001%, 6.3% { -webkit-mask-position: 0 -406px; }
6.3001%, 8.7% { -webkit-mask-position: 0 -609px; }
8.7001%, 10.9% { -webkit-mask-position: 0 -811px; }
10.9001%, 13.2% { -webkit-mask-position: 0 -1014px; }
13.2001%, 15.4% { -webkit-mask-position: 0 -1217px; }
15.4001%, 17.6% { -webkit-mask-position: 0 -1420px; }
17.6001%, 19.8% { -webkit-mask-position: 0 -1623px; }
19.8001%, 22% { -webkit-mask-position: 0 -1826px; }
22.0001%, 24.2% { -webkit-mask-position: 0 -2029px; }
24.2001%, 26.4% { -webkit-mask-position: 0 -2232px; }
26.4001%, 28.8% { -webkit-mask-position: 0 -2435px; }
28.8001%, 31% { -webkit-mask-position: 0 -2638px; }
31.0001%, 33.2% { -webkit-mask-position: 0 -2841px; }
33.2001%, 35.4% { -webkit-mask-position: 0 -3044px; }
35.4001%, 37.6% { -webkit-mask-position: 0 -3247px; }
37.6001%, 39.8% { -webkit-mask-position: 0 -3450px; }
39.8001%, 42% { -webkit-mask-position: 0 -3653px; }
42.0001%, 44.2% { -webkit-mask-position: 0 -3856px; }
44.2001%, 46.4% { -webkit-mask-position: 0 -4059px; }
46.4001%, 48.8% { -webkit-mask-position: 0 -4262px; }
48.8001%, 51% { -webkit-mask-position: 0 -4465px; }
51.0001%, 53.2% { -webkit-mask-position: 0 -4668px; }
53.2001%, 55.4% { -webkit-mask-position: 0 -4871px; }
55.4001%, 57.6% { -webkit-mask-position: 0 -5074px; }
57.6001%, 59.8% { -webkit-mask-position: 0 -5277px; }
59.8001%, 62% { -webkit-mask-position: 0 -5480px; }
62.0001%, 64.2% { -webkit-mask-position: 0 -5683px; }
64.2001%, 66.4% { -webkit-mask-position: 0 -5886px; }
66.4001%, 68.6% { -webkit-mask-position: 0 -6089px; }
68.6001%, 70.8% { -webkit-mask-position: 0 -6292px; }
70.8001%, 73% { -webkit-mask-position: 0 -6495px; }
73.0001%, 75.2% { -webkit-mask-position: 0 -6698px; }
75.2001%, 77.4% { -webkit-mask-position: 0 -6901px; }
77.4001%, 79.6% { -webkit-mask-position: 0 -7104px; }
79.6001%, 81.8% { -webkit-mask-position: 0 -7307px; }
81.8001%, 84% { -webkit-mask-position: 0 -7510px; }
84.0001%, 86.2% { -webkit-mask-position: 0 -7713px; }
86.2001%, 88.4% { -webkit-mask-position: 0 -7916px; }
88.4001%, 90.6% { -webkit-mask-position: 0 -8119px; }
90.6001%, 92.8% { -webkit-mask-position: 0 -8322px; }
92.8001%, 95% { -webkit-mask-position: 0 -8525px; }
95.0001%, 97.2% { -webkit-mask-position: 0 -8729px; }
97.2001%, 100% { -webkit-mask-position: 0 -8932px; }
}