Solved

CSS animation not sure why this isn't working

Posted on 2013-01-29
1
229 Views
Last Modified: 2013-02-17
If you go to the following site here you should be able to hover the box and it should move so not sure as to why in Firefox 18.01

http://bit.ly/115ivqa
0
Comment
Question by:stargateatlantis
1 Comment
 
LVL 30

Accepted Solution

by:
LZ1 earned 500 total points
ID: 38835345
Try this:
Your missing your name and keyframes:

.box{
	 background-color:#666;
	 width:30px;
	 height:30px;
}

.box:hover {
    -moz-animation-duration: 2s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-name: scale, slide;
    -moz-animation-timing-function: ease;
	-moz-animation-name:mymove;
    position: relative;
}
@keyframes mymove 
{
from {left:0px;}
to {left:200px;}
}

Open in new window

0

Featured Post

Simplifying Server Workload Migrations

This use case outlines the migration challenges that organizations face and how the Acronis AnyData Engine supports physical-to-physical (P2P), physical-to-virtual (P2V), virtual to physical (V2P), and cross-virtual (V2V) migration scenarios to address these challenges.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Button Css BootStrap 2 45
stop navigation from wrapping 7 78
Zoom the page when you go in from your phone 3 54
Problem to refer to value 8 48
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question