CSS3 Transitions not working

综合技术 2018-06-23 阅读原文

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:

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!)





...

Can anybody tell me where I'm going wrong?

Problem courtesy of: Lorna Dixon

Solution

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/

Solution courtesy of: Yaron U.

CSS3 Recipes

责编内容by:CSS3 Recipes阅读原文】。感谢您的支持!

您可能感兴趣的

CSS3 transition working only in Chrome How can I make this transition work in all browsers? It functions only in Chrome despite the fact that I applied...
Browser compatibility issues with CSS3 I designed a few web pages using some CSS3 . It looks good in Google Chrome, but the styles become clumsy ...
Make a parallelogram with one side in CSS3 I have make a parallelogram with CSS3 . With this code: #parallelogram { width: 150px; height: 100...
Syncing several CSS3 animations I would need to able few css3 animations but I have been reading around and it seems it's not really easy. Is ther...
CSS3 transitions only works on the first element i... I got a weird issue with my code at safari. i created a jsbin and the issue is also there: http://jsbin.co...