Tycoon Talk - CSS Forum

Css3 different keyframes for different states

rentless — Wed, 19 Jun 2013 00:50:12 GMT

Hey folks! I've got some trouble with this. My first animation works fine when the page loads, but i want to trigger another animation when you hover the figure element, if you do this, the first animation repeats, but apparently,if you put the mouse over the blue box and force it to go to the original position, then my second animation works :/
If you're want to see the working example visit this link :
jsfiddle(dot)net/Kd6PX/
I appreciate any aid :D
Here is my code :

Code:

#wrapper{

        margin: auto;

        width: 960px;

        height: 500px;

        background-color: black;

}



 #wrapper #animation-wrapper{

        width: 50px;

        height: 50px;

        background-color: blue;

        position: relative;

        -webkit-animation-name:move;

        -webkit-animation-duration:4s;

        /*-webkit-animation-direction:alternate;*/

        /*-webkit-animation-iteration-count:infinite;*/

        /*-webkit-animation-delay:2s;*/

        -webkit-animation-fill-mode:forwards;

        -moz-animation-name:move;

        -moz-animation-duration:4s;

        -moz-animation-fill-mode:forwards;

        

}        

 #animation-wrapper{

        -webkit-transition-duration:1s;

        -moz-transition-duration:1s;

}

#wrapper #animation-wrapper:hover{

        /*-webkit-transition:2s all;*/

        /*top: 100px;*/

        /*-webkit-transform:translateX(100px);

        -moz-transform:translateX(100px);*/

        -webkit-animation:left 2s;

        -moz-animation:left 2s;

        

}



@-webkit-keyframes move{

        from { top: 0px;  }

        to { top: 100px; }

}

                @-webkit-keyframes left{

                from { left: 0px;/*-webkit-transition-duration:0s;*/ }

                to { left: 100px; }

                }



@-moz-keyframes move{

        from { top: 0px; }

        to { top: 100px; }

}

                @-moz-keyframes left{

                from { left: 0px;}

                to { left: 100px; }

                }

In mobile Website, Sub menu not working?

vsrajan — Fri, 14 Jun 2013 10:08:22 GMT

I have installed wp responsive theme for my sites, url sdreamworks.in and insightab.com in mobile view, sub menu not working? what is the exact problem for in this case..

Issue with float on certain Wordpress Pages

jstarbuck — Thu, 13 Jun 2013 23:07:24 GMT

Hi,

I'm having an issue with two types of pages on our blog. The styling on the "author archives" (ex: http://www.starbuckrealtygroup.com/b...r/jenstarbuck/) and "search results" (example: http://www.starbuckrealtygroup.com/b...&submit=Search) pages always put the #secondary div outside of the #primary, forcing it to the bottom of the page. On all other pages, #secondary is inside the #primary div and renders correctly (example: http://www.starbuckrealtygroup.com/b...tegory/buyers/)

Advice?

Thanks!

Make wordpress header responsive.

outstandn — Thu, 13 Jun 2013 05:07:25 GMT

Hello,

I need some basic help, All I am trying to do is make my header on this website responsive. When you look at the website on a laptop it looks centered but, when you view it on a tablet or smartphone its still big and doesn't shrink down to size. The rest of the theme is responsive and adjusts to the device it's viewed on. So how can I make the top header become responsive as well.

Website http:// kataztrofeemusic. com/

Thank You

Z-Index Issue with Nivo Gallery Slides

jstarbuck — Tue, 04 Jun 2013 21:25:10 GMT

Hi,

I'm working on the slideshow on http://starbuckrealtygroup.com/index.php. The issue is that when I go to fullscreen mode, there are some page elements that render ABOVE the slideshow. (Mainly .widget-area) I have tried applying a lower z-index to this class, but it doesn't hide it below the slideshow in fullscreen. Advice?

Thanks!