SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    "CSS3 Transitions" Let's see what you can do!

    Disclaimer: Transitions are a working draft but they have not reached candidate recommendation yet. This thread in no way encourages the premature use of "transitions" on public sites but rather it is set forth to explore the possibilities they have to offer. Please keep all posts on topic and refrain from any Anti-CSS3 comments. Thank You
    Maybe you have heard about them, maybe not. I had heard about them but never played around with them until a few days ago. I must say that I am quite impressed by what I have seen so far.

    Current Support:

    From what I can see it looks like current support with vendor specific properties includes Webkit (Chrome.4+ & Safari.4+) and Opera.10.5+. The properties are available in FF and from what I have read they do work in their nightly builds and FF4 will be supporting transitions. An FF4 beta version is rumored to be released within a month possibly.

    It looks like Webkit has been involved with this the longest since the Blog Post linked below dates back to October 2007. That being the case my Chrome and Safari versions mentioned above are probably not accurate but that is what I am testing with.

    More Info:

    You can find more info and live examples in the links below. Opera Web Dev has probably got the best in depth article that I have read through so far. They have got many working demos that compliment each of the properties.

    Opera Developer: CSS3 transitions and 2D transforms
    Surfin’ Safari CSS Animation

    Mozilla Dev Center: CSS transitions

    Live Examples:

    A while back I had been involved in a thread that was using a jQuery "Kwick Nav" menu that had roll out anchors on hover.

    We had got the menu down where it was using a:hover in the css to simulate the effects if js was disabled. It worked just fine but as you know :hover is instantaneous and I had made a comment that I needed a :hover-speed property. It was really just a joke I was making but it looks like "transitions" had exactly what I was looking for all along. It is known as the transition-duration property, values are set in "s" for seconds ( such as 1s, 2s, 3s etc.)

    I have taken the basic code of that menu and added transitions to it, view that jQuery menu above and then view my transitions version below and tell me that ain't close enough to dance with. While I was at it I also made a version of a "Read More" link with a disjointed rollover.

    Roll-Out Anchor with Fade-In BG Color
    Fade-In Disjointed Rollover

    If you will view all these examples in current versions of Webkit and Opera you will see what this is all about. This is about progressive enhancement with modern browsers, both of my demos above degrade gracefully and work in all major browsers.

    Let's see what you can do!


    I'd like to see some more "transition" examples from creative minds so feel free to post your code or links to live examples. I consider this an exciting new addition in CSS3 since it gives me the eluded :hover-speed property that I had been searching high and low for.

  2. #2
    SitePoint Enthusiast David.A's Avatar
    Join Date
    May 2010
    Location
    Milky Way Galaxy
    Posts
    66
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    :hover-speed property that I had been searching high and low for.
    Are you sure that psuedo exists? There isn't a thing about it in W3's CSS selectors: http://www.w3.org/TR/css3-selectors/

  3. #3
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Are you sure that psuedo exists?
    Hi David,
    No, it does not exist. I had said that it was just a joke or wishful thinking at the times I needed something like it. If you read back through my post you will see that I did not say it was an actual property.

    I had made a comment that I needed a :hover-speed property. It was really just a joke I was making but it looks like "transitions" had exactly what I was looking for all along. It is known as the transition-duration property,
    I was referring back to a Recent Thread where I had said that it would be nice to have someway to control the hover speed/delay.
    Transitions give us that ability to do that.

    I consider this an exciting new addition in CSS3 since it gives me the eluded :hover-speed property that I had been searching high and low for.
    Maybe I could have chose a better word than eluded but what I meant was that it was something that had been hiding from us until now. To clear up any confusion, transition-duration is how we can control the speed of the :hover property with CSS3.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •