SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Thread: CSS3 Animation

  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question CSS3 Animation

    Hi there,

    Currently working on a little experiment with CSS3 animation just to get my eye-in a little bit.
    I've got a basic example of a hover animation changing the size of an element but I was wondering how I go about animating an element within a container when the container is hovered.

    Here is my basic example with the "button" div in place for the secondary animation.
    Code:
    <html>
    <head>
    <link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    #container{width:928px;}
    
    @keyframes myfirst
    {
    from {width: 200px;} 
    to {width: 300px;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */{
    from {width: 200px;} 
    to {width: 300px;}
    }
    
    @keyframes button
    {
    from {top: 10px;} 
    to {top: 50px;}
    }
    
    @keyframes -webkit-keyframes button
    {
    from {top: 10px;} 
    to {top: 50px;}
    }
    
    div.animated{animation: myfirstout 1s; -webkit-animation: myfirstout 0.5s; /* Safari and Chrome */ animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}
    div.animated:hover {background:red; animation: myfirstin 1s; -webkit-animation: myfirstin 0.5s; /* Safari and Chrome */ animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;}
    </style>
    </head>
    <body>
    <div id="container">
    	<div class="animated"><div class="button"></div></div>
    </div>
    </body>
    </html>
    Then, I had a go at duplicating the keyframes for button but when I hover over the container nothing happens to the button. What did I break?!

    Code:
    <html>
    <head>
    <link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css" />
    <link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css" />
    
    <style type="text/css">
    #container{width:928px;}
    
    @keyframes myfirst
    {
    from {width: 200px;} 
    to {width: 300px;}
    }
    
    @-webkit-keyframes myfirst /* Safari and Chrome */{
    from {width: 200px;} 
    to {width: 300px;}
    }
    
    @keyframes button
    {
    from {top: 10px;} 
    to {top: 30px;}
    }
    
    @keyframes -webkit-keyframes button
    {
    from {top: 10px;} 
    to {top: 30px;}
    }
    
    div.animated{width:200px; height:200px; background:red;}
    .button{position:absolute; top:0px; left:0px; width:100px; height:20px; background:blue;}
    div.animated:hover {background:red; animation: myfirst 1s; -webkit-animation: myfirst 0.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; /* Safari and Chrome */}
    div.animated:hover .button{background:blue; animation: button 1s; -webkit-animation: button 0.5s; animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards; /* Safari and Chrome */}
    </style>
    </head>
    <body>
    <div id="container">
    	<div class="animated"><div class="button"></div></div>
    </div>
    </body>
    </html>
    Cheers,

    Shoxt3r

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You have a typo here:

    Code:
    @keyframes -webkit-keyframes button { from {
    It should be:

    Code:
    @-webkit-keyframes button { from {

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    You have a typo here:

    Code:
    @keyframes -webkit-keyframes button { from {
    It should be:

    Code:
    @-webkit-keyframes button { from {
    Damn, is that all it was. Why didn't I notice that....


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
  •