Hello There, Guest!
View New Posts  |  View Today's Posts
CSS3 Animations

  • 0 Vote(s) - 0 Average


09-02-2015, 07:24 PM #1
Louis
Master of the IRCs!
**
Posts: 153 Threads:23 Joined: May 2012 Reputation: 11

CSS3 Animations
WARNING: The CSS3 I created is meant to be annoying; therefore it's quite flashy and ugly.

The other day I got a free .im domain when renewing my current domain. Someone suggested I make a Vim joke; ended up with this: How do I close Vim!?
This is 100% CSS3 animated and works pretty smoothly on modern browsers. Tested with Firefox and Chrome.
Here are some of the main parts of the CSS3 I've used:


Code:
/*
   Using CSS, you can select which child elements to run "animation" (-webkit-animation for chrome) on.
*/
.wrapper span {
  animation: fader 65s linear infinite 0s;
  -webkit-animation: fader 65s linear infinite 0s;
}

/*
  Now, using a animation-delay (-webkit-animation-delay), you can slow down how fast each span is displayed.
  This causes the elements to be displayed one at a time.
*/
div span:nth-child(1) {
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
}
div span:nth-child(2) {
  animation-delay: 5s;
  -webkit-animation-delay: 5s;
}
div span:nth-child(3) {
  animation-delay: 10s;
  -webkit-animation-delay: 10s;
}

/*
  Use @keyframes (-webkit-keyframes) you can run CSS on every step of the animation.
  This one causes the content to move up the page then slide down slowly as it fades out.
*/
@keyframes fader {
  0% { opacity: 0.8; animation-timing-function: ease-in; height: 0px; }
  0.5% { opacity: 0.8; height: 135%; }
  4% { opacity: 0.6; }
  8% { opacity: 0; height: 115%; }
  100% { opacity: 0; }
}

/*
  To make my page extra annoying, I wanted to make the text rainbow colored and animated.
  To do this, I have to select each element and change the delay again, this time using <i></i> tags for each letter.
*/
span i:nth-child(7n -6) {
  animation-delay: 0.05s;
  -webkit-animation-delay: 0.05s;
}
span i:nth-child(7n -5) {
  animation-delay: 0.15s;
  -webkit-animation-delay: 0.15s;
}
span i:nth-child(7n -4) {
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
}

/*
  Using @keyframes again, I can animate each letter one at a time to change colors.
*/
@keyframes rainbow {
  from { color: rgb(255, 0, 0); }
  16.6% { color: rgb(255, 0, 255); }
  33.3% { color: rgb(0, 0, 255); }
  50% { color: rgb(0, 255, 255); }
  66.6% { color: rgb(0, 255, 0); }
  83.3% { color: rgb(255, 255, 0); }
  to { color: rgb(255, 0, 0); }
}

/*
  Just for that one extra step of horrible, I chose to make the page background a rainbow as well.
  This is easily done with the body selector in CSS and  background-image.
  Using background-size lets you change the intensity of the background.
*/
body {
  background: black;
  background: -moz-linear-gradient(top, rgba(255, 0, 0, 1) 0%, rgba(255, 255, 0, 1) 15%, rgba(0, 255, 0, 1) 30%, rgba(0, 255, 255, 1) 50%, rgba(0, 0, 255, 1) 65%, rgba(255, 0, 255, 1) 80%, rgba(255, 0, 0, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 0, 0, 1)), color-stop(15%, rgba(255, 255, 0, 1)), color-stop(30%, rgba(0, 255, 0, 1)), color-stop(50%, rgba(0, 255, 255, 1)), color-stop(65%, rgba(0, 0, 255, 1)), color-stop(80%, rgba(255, 0, 255, 1)), color-stop(100%, rgba(255, 0, 0, 1)));
  background-size: 150% 150%;
}
This post was last modified: 09-02-2015, 09:46 PM by Louis.

09-03-2015, 07:27 PM #2
AceInfinity
Developer
*******
Administrators
Posts: 9,733 Threads:1,026 Joined: Jun 2011 Reputation: 76

RE: CSS3 Animations
Haha, very cool. This is one of the reasons why I don't use Vim. It takes a while to actually remember a lot of these shortcuts well enough to use them effectively in order to speed up workflow, but in the meantime, you're pretty much stuck with learning how to use Vim rather than actually working on what you're trying to do.


Microsoft MVP .NET Programming - (2012 - Present)
®Crestron DMC-T Certified Automation Programmer

Development Site: aceinfinity.net

 ▲
 ▲ ▲

09-03-2015, 10:31 PM #3
Louis
Master of the IRCs!
**
Posts: 153 Threads:23 Joined: May 2012 Reputation: 11

RE: CSS3 Animations
Nano is where it's at. Nano is probably the easiest terminal based editor out there. Vim just annoys me; whenever I accidentally open it I can never remember how to close it... lol

09-05-2015, 08:09 PM #4
AceInfinity
Developer
*******
Administrators
Posts: 9,733 Threads:1,026 Joined: Jun 2011 Reputation: 76

RE: CSS3 Animations
I've gotten used to the basics of vim by now, it's not as bad after the first couple days. I like how the navigation with HJKL instead of the arrow keys means you don't have to move your hand to the right or use the mouse. I've added a key map for 'jj' to switch to command mode from insert mode too so I'm not having to move my pinky up to the left to hit the <ESC> key.

Really though, this is an amazing demonstration of some CSS3 capabilities Louis. You have some very cool demos :) We're lucky to have a member like you around!

Cheers
This post was last modified: 09-05-2015, 08:09 PM by AceInfinity.


Microsoft MVP .NET Programming - (2012 - Present)
®Crestron DMC-T Certified Automation Programmer

Development Site: aceinfinity.net

 ▲
 ▲ ▲

09-14-2015, 09:26 AM #5
Mazzn
ლ(ಠ益ಠლ)
*******
Administrators
Posts: 199 Threads:16 Joined: Sep 2013 Reputation: 19

RE: CSS3 Animations
I hate to admit it, but I just fired up visudo on my server and actually opened up your page because I forgot about :q for the 100th time... Changed the editor to nano now!
Visit me at mazzn.net & blog.mazzn.net!
//This is very important :)

Self.KeepImproving(true);


09-15-2015, 12:15 AM #6
AceInfinity
Developer
*******
Administrators
Posts: 9,733 Threads:1,026 Joined: Jun 2011 Reputation: 76

RE: CSS3 Animations
Code:
nnoremap <leader>q :!q<CR>

Thumbs Up


Microsoft MVP .NET Programming - (2012 - Present)
®Crestron DMC-T Certified Automation Programmer

Development Site: aceinfinity.net

 ▲
 ▲ ▲




Forum Jump:


Possibly Related Threads...
Thread Author Replies Views Last Post
  CSS3 Spinning Icons. [Snippet] KoBE 9 5,265 05-03-2012, 09:47 PM
Last Post: KoBE


Users browsing this thread: 1 Guest(s)