-moz-transition-duration не работает? - PullRequest
Новая
       31

-moz-transition-duration не работает?

2 голосов
/ 04 марта 2012

ниже у вас есть код, который я использую для создания 3D-анимации:

Вот скрипка и код: http://jsfiddle.net/82C2N/

<html>
<head>
    <title>3D CSS Animation</title>
    <style>
        #movieposters li { 
            display:inline; float:left;
            -webkit-perspective: 500; 
            -webkit-transform-style: preserve-3d;
            -webkit-transition-property: perspective; 
            -webkit-transition-duration: 0.5s; 
            transition-duration: 1s; 
            -moz-perspective: 500; 
            -moz-transform-style: preserve-3d;
            -moz-transition-property: perspective; 

        width: 200px;
        }

        #movieposters li:hover { 
            -webkit-perspective: 5000; 
            -moz-perspective: 5000; 
            transition-duration: 1s; 
            transition-timing-function: linear; 
        width: 200px;
        }

        #movieposters li img { 
            -webkit-transform: rotateY(30deg);
            -webkit-transition-property: transform; 
            transition-duration: 0.5s; 
            -moz-transition-duration: 1s; 
            -moz-transform: rotateY(30deg);
            -moz-transition-property: transform; 

        width: 200px;
        }
        #movieposters li:hover img { 
        width: 200px;
            -webkit-transform: rotateY(0deg); 
            -moz-transform: rotateY(0deg);
        }
    </style>
</head>
<body style="height: 100%" class="bluegradient">
    <ul id="movieposters">
        <li>
            <img src="http://fc02.deviantart.net/fs36/i/2008/252/6/1/House_MD_DVD_covers_by_kdaver.jpg"/>
        </li>
    </ul>
</body>

Чтобы увидеть нужный эффект, откройте его в Chrome. В Firefox -moz-transition-duration, кажется, не имеет никакого эффекта. Перспектива и значение поворота меняются при наведении, но без анимации.

Есть идеи, почему? Я использую последнюю версию Firefox (10.0.2).

1 Ответ

5 голосов
/ 04 марта 2012

Это проблема со значением transform, в Mozilla с префиксом -moz-transform. 

#movieposters li img {
    -moz-transition-property: -moz-transform  
}

Вот скрипка:
http://jsfiddle.net/cadence96/82C2N/1/

...