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 (源链)。感谢您的支持!

您可能感兴趣的

What is the difference between E F and E ~ F css3 ... After reading W3C documentation on CSS3 selectors, I am still...
CSS3 Filter详解(改变模糊度 亮度 透明度等方法)... 前言 CSS3 Filter(滤镜) 属性提供了提供模糊和改变元素颜色的功能。 CSS3 Fitler 常用于调整图像的渲染、背景或边框显示效果。 ...
CSS3 Gradient for multiple browsers I have this CSS linear gradient working in Firefox and can't seem to get...
Js tips: Creating a simple parallax scrolling with... As a web developer, you would be asked to do a parallax at some point and th...
html5: how can i trigger or stop a css3 loop anima... I have a slideshow made with css3 animation like this: @-keyframes...