CODEWITHSUNDEEP
htmlcsstransition
Lorna Dixon
Lorna Dixon

Reputation: 3

CSS3 Transitions not working

I'm building a page which involves CSS transitions, and I noticed I couldn't get any of them to work, so to check it wasn't a mistake with the coding of the actual transitions themselves, I pasted one of W3S' example snippets into my page and tested it -- still didn't work.

I'm using Chrome to view the page, but it shouldn't be anything to do with browsers since the W3S code (obviously) had all the necessary variations in it:

W3S HTML:

<div class="test"></div>

W3S CSS:

.test:hover {    width:100px;
                 height:100px;
                 background:red;
                 transition:width 2s;
                 -moz-transition:width 2s; /* Firefox 4 */
                 -webkit-transition:width 2s; /* Safari and Chrome */
                 -o-transition:width 2s; /* Opera */ }

Also, when I put the pseudo-class :hover on, it disappears completely in the browser, whereas if I leave it off, obviously it doesn't do anything because there's no action to trigger it. I don't know if this is relevant?

I wondered if perhaps I forgot to include something in the head (I'm a. still pretty new to web design and b. considerably scatterbrained -- not a good combination!)

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8" />
<title>...</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>

Can anybody tell me where I'm going wrong?

Upvotes: 0

Views: 1120

Answers (1)

Yaron U.
Yaron U.

Reputation: 7881

theh definition of the transition should not be on the :hover decleration, it needs to be defined for the element, and then in the :hover just change the width,

for example:

.test {    width:100px;
           height:100px;
           background:red;
           transition:width 2s;
           -moz-transition:width 2s; /* Firefox 4 */
           -webkit-transition:width 2s; /* Safari and Chrome */
           -o-transition:width 2s; /* Opera */ 
       }
.test:hover {width: 200px;}

you can see this example here: http://jsfiddle.net/zjaPA/

Upvotes: 2

Related Questions