6 Replies - 1984 Views - Last Post: 15 February 2014 - 03:44 PM

#1 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1148
  • View blog
  • Posts: 7,144
  • Joined: 07-September 06

[Challenge][Basic-Intermediate] CSS3 Animations

Post icon  Posted 02 February 2014 - 01:55 PM

HTML5 and CSS3 have been out for a while now, but if you are anything like me then you haven't dove into them much. Sure, you can play with a tag here or there, but you just haven't seen a reason to really learn either or them yet. At this point most browsers are doing a pretty good job of dealing with the new CSS3 and HTML5 capabilities (even IE 10+, surprisingly) and as a result I thought it may be time to dive into something that is new in CSS3 (and much needed) -- Animations.

Resources:
Aren't familiar with CSS3 animation syntax and capabilities? That's alright! Here are some resources for your perusal.
CSS3 Info
W3.org
W3schools

And now for the moment you have all been waiting for! The challenges!!!
[Beginner]
Create a navbar with links that grow in size when hovered over. Don't use Javascript for this :)/>/>

[Intermediate]
Complete the beginner challenge and then, when the link is clicked, animate the introduction of the new material (create a tween between the content that is currently on the page and the new content). You can get as creative as you want for this. You will probably want to use Javascript to help with this, but keep the animations in CSS only!

Reminder:
Please remember to post your code in the spoiler tags [ spoiler][ code]Your code goes here.[/ code][/ spoiler] and remove the spaces in the tags to make them work.

I am looking forward to seeing what people come up with.

Is This A Good Question/Topic? 4
  • +

Replies To: [Challenge][Basic-Intermediate] CSS3 Animations

#2 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 439
  • View blog
  • Posts: 1,866
  • Joined: 30-April 10

Re: [Challenge][Basic-Intermediate] CSS3 Animations

Posted 03 February 2014 - 09:57 AM

Just to let you know I plan on entering this one, it may be a few days though.
Was This Post Helpful? 0
  • +
  • -

#3 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1148
  • View blog
  • Posts: 7,144
  • Joined: 07-September 06

Re: [Challenge][Basic-Intermediate] CSS3 Animations

Posted 04 February 2014 - 07:53 PM

Here's my basic implementation. Still working on getting the CSS to work the way I want it to for the intermediate. I don't worry about browsers that don't support the standard opacity and transition CSS3 attributes though.

Spoiler

Was This Post Helpful? 0
  • +
  • -

#4 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 439
  • View blog
  • Posts: 1,866
  • Joined: 30-April 10

Re: [Challenge][Basic-Intermediate] CSS3 Animations

Posted 14 February 2014 - 09:29 PM

Here is my basic implementation, still working on the "Tween" as I don't know what you mean, I have never heard that before.

Spoiler

Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3459
  • View blog
  • Posts: 11,725
  • Joined: 12-December 12

Re: [Challenge][Basic-Intermediate] CSS3 Animations

Posted 15 February 2014 - 06:57 AM

Tween is short for tweenager :)

webopedia said:

Short for in-betweening, the process of generating intermediate frames between two images to give the appearance that the first image evolves smoothly into the second image.

I assume, though, that we are just talking about some kind of animation/effect between the original and new content..? (Rather than, specifically, different frames?)
Was This Post Helpful? 0
  • +
  • -

#6 laytonsdad  Icon User is offline

  • Cheese and Sprinkles
  • member icon

Reputation: 439
  • View blog
  • Posts: 1,866
  • Joined: 30-April 10

Re: [Challenge][Basic-Intermediate] CSS3 Animations

Posted 15 February 2014 - 03:33 PM

So like a z-index sliding whatchamacallit. I think I get it now.

:)
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3459
  • View blog
  • Posts: 11,725
  • Joined: 12-December 12

Re: [Challenge][Basic-Intermediate] CSS3 Animations

Posted 15 February 2014 - 03:44 PM

I don't think you can do much with z-index, other than bringing something above another and using opacity to fade it in.

Some use of easing might give a thrill.
Was This Post Helpful? 1
  • +
  • -

Page 1 of 1