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 Translate: Translate an element on an Ellipse... I've been searching the answer for awhile but all I can see is translating an object in circular path. Is there a way to translate an element on an el...
Html5 and Css3 features Hello Everyone today I'm showing some new and Old features in Html5 and Css3. Mark element:The HTML Mark element (mark) helps us to highl...
CSS3 Animation on Button Click I am trying to add a css3 animation to a button when it is clicked. (I want the button to zoom in, spin and then zoom out so that it lo...
CSS3 transition changes another elements’s m... I have this HTML document:​ and this is my CSS: .c...
How do I make my HTML5 nav li tab stay active on c... I am learning HTML 5 and CSS3 and am having trouble with my tabbed navigation bar. I thought the li:active css stlye would achieve my goal but ...