综合技术

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:

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

Parry the date string to the Date object when loading the UI Bootstrap Datepicker

上一篇

Browser updates: Here's how often Chrome, Firefox, Edge and Safari get refreshed

下一篇

你也可能喜欢

评论已经被关闭。

插入图片
CSS3 Transitions not working

长按储存图像,分享给朋友