Inefficient and unpractical CSS3 animation to show text.
-
-
Save califat/92ab70540e818311d087d364da40085c to your computer and use it in GitHub Desktop.
Ugly Thing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="content"> | |
<span class="expand"> | |
Oh well, heil Hitler, bitch! And let me tell you something else. So what're you saying? Like, I shot someone with, like, a gun? We flipped a coin, okay? You and me. You and me! Coin flip is sacred! | |
</span> | |
</div> | |
<div id="content"> | |
<span class="expand"> | |
Your job is waiting for you in that basement, as per the coin! I took this vo-tech class in high school, woodworking. I took a lot of vo-tech classes, because it was just big jerk-off, but this one time I had | |
</span> | |
</div> | |
<div id="content"> | |
<span class="expand"> | |
this teacher by the name of... Mr... Mr. Pike. I guess he was like a Marine or something before he got old. He was hard hearing. My project for his class was to make this wooden box. You know, like | |
</span> | |
</div> | |
<div id="content"> | |
<span class="expand"> | |
a small, just like a... like a box, you know, to put stuff in. So I wanted to get the thing done as fast as possible. I figured I could cut classes for the rest of the semester and he couldn't flunk me as long | |
</span> | |
</div> | |
<div id="content"> | |
<span class="expand"> | |
as I, you know, made the thing. So I finished it in a couple days. And it looked pretty lame, but it worked. You know, for putting in or whatnot. So when I showed it to Mr. Pike for my grade, he | |
</span> | |
</div> | |
<div id="content"> | |
<span class="expand"> | |
looked at it and said: 'Is that the best you can do?' At first I thought to myself 'Hell yeah, bitch. Now give me a D and shut up so I can go blaze one with my boys.' I don't know. Maybe it was the way he | |
</span> | |
</div> | |
<div id="content"> | |
<span class="expand"> | |
said it, but... it was like he wasn't exactly saying it sucked. He was just asking me honestly, 'Is that all you got?' And for some reason, I thought to myself: 'Yeah, man, I can do better.' | |
</span> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, body{ | |
background: black; | |
} | |
#content { | |
width: 100%; | |
/* Full Width */ | |
height: 7px; | |
margin: 50px auto; | |
background: #000; | |
} | |
.expand { | |
width: 97%; | |
height: 58px; | |
margin: 2px 0; | |
background: #2187e7; | |
position: absolute; | |
box-shadow: 0px 0px 20px 2px rgba(0,198,255,0.8); | |
-webkit-animation: fullexpand 3s ease-out forwards; | |
color: rgba(0, 0, 0, 0); | |
} | |
@-webkit-keyframes fullexpand { | |
0% { | |
width: 0px; | |
height: 3px; | |
} | |
90% { | |
width: 97%; | |
height: 3px; | |
box-shadow: 0px 0px 20px 2px rgba(0,198,255,0.8); | |
color: rgba(0, 0, 0, 0); | |
} | |
100%{ | |
height: 58px; | |
box-shadow: 0px 0px 0px; | |
color: rgba(0, 0, 0, 1); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment