CSS3 Rotate Animation

<img class="image" src="" alt="" width="120" height="120">

Не удается заставить это анимированное изображение работать, предполагается, что он вращается на 360 градусов.

Я думаю, что-тоЧто-то не так с CSS ниже, так как он остается на месте.

.image {
    float: left;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-top: -60px;
    margin-left: -60px;

    -webkit-animation-name: spin;
    -webkit-animation-duration: 4000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;

    -moz-animation-name: spin;
    -moz-animation-duration: 4000ms;
    -moz-animation-iteration-count: infinite;
    -moz-animation-timing-function: linear;

    -ms-animation-name: spin;
    -ms-animation-duration: 4000ms;
    -ms-animation-iteration-count: infinite;
    -ms-animation-timing-function: linear;

    animation-name: spin;
    animation-duration: 4000ms;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    @-ms-keyframes spin { 
        from { 
            -ms-transform: rotate(0deg); 
        } to { 
            -ms-transform: rotate(360deg); 
        }
    }
    @-moz-keyframes spin { 
        from { 
            -moz-transform: rotate(0deg); 
        } to { 
            -moz-transform: rotate(360deg); 
        }
    }
    @-webkit-keyframes spin { 
        from { 
            -webkit-transform: rotate(0deg); 
        } to { 
            -webkit-transform: rotate(360deg); 
        }
    }
    @keyframes spin { 
        from { 
            transform: rotate(0deg); 
        } to { 
            transform: rotate(360deg); 
        }
    }
}

Ответы на вопрос(3)

Рабочий раствор.

HTML:

<img class="image" src="your-image.png">

CSS:

.image {
    overflow: hidden;
    transition-duration: 0.8s;
    transition-property: transform;
}
.image:hover {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}

Вы должны навести курсор на изображение, и вы получите эффект поворота на 360 градусов.

PS: добавить-webkit- расширение для работы в браузерах Chrome и других webkit. Вы можете проверить обновленную скрипку на наличие webkitВОТ

 Just Plain High05 апр. 2014 г., 12:07
Скрипка не делаетт работа o.O Chrome не нравится ваш CSS, в частности, "преобразование» а также "переход-недвижимость», О, Боже.
 Alph.Dev13 сент. 2017 г., 13:48
2017: Теперь это очень хорошо поддерживается и является предпочтительным способом выполнения бесконечных вращений.-webkit- префикс больше не нужен и может быть безопасно удален. Поддержка браузера:caniuse.com/#search=transforms
 Nitesh07 апр. 2014 г., 08:27
Для этого вам нужно добавить-webkit-tranform чтобы это работало. Вот обновленная скрипка.jsfiddle.net/sELBM/172 - @JustPlainHigh
 Just Plain High07 апр. 2014 г., 09:16
Спасибо за обновление. Хороший ответ :)

использующее то же самое, что и вы:

.knoop1 img{
    position:absolute;
    width:114px;
    height:114px;
    top:400px;
    margin:0 auto;
    margin-left:-195px;
    z-index:0;

    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    -o-transition-duration: 0.8s;
    transition-duration: 0.8s;

    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
     transition-property: transform;

     overflow:hidden;
}

.knoop1:hover img{
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg); 
    -o-transform:rotate(360deg);
}
 evolutionxbox18 мар. 2016 г., 17:49
Пожалуйста, выбирайте местные примеры, а не битые ссылки на сайте.
 Dusty08 дек. 2014 г., 18:19
добавлять:transform:rotate(360deg); для IE
 Markus Bucher21 авг. 2016 г., 15:05
Ссылка не работает сейчас.
Решение Вопроса

демонстрация, Правильная анимация CSS:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
<img class="image" src="http://i.stack.imgur.com/pC1Tv.jpg" alt="" width="120" height="120">

Некоторые примечания к вашему коду:

Вы'мы вложили ключевые кадры в.image править, и этоневерноfloat:left победил'работать с абсолютно позиционированными элементамиПосмотри намогу ли я использовать: IE10 не делаетне нужно-ms- префикс
 MD Ashik13 нояб. 2016 г., 10:56
Здравствуйте. Могу ли я остановить анимацию вращения бесконечности через 5 секунд?
 Jack M.13 сент. 2013 г., 00:21
Если кто-то попробует это в своем собственном коде: НЕ ЗАБЫВАЙТЕ в разделе @ внизу
 Razgriz12 февр. 2017 г., 16:07
Я чуть не выплюнул воду, когда запустил анимацию.
 Martin Carney28 апр. 2015 г., 23:12
Упрощенная демонстрация:jsfiddle.net/Ugc5g/4710
 gregn320 нояб. 2018 г., 03:30
 float:left won't work on absolutely positioned elements " , это уменьшит их до минимального размера, хотя, подобно тому, что делает display: inline-block
 Sangrai13 окт. 2017 г., 13:30
Не работает на мобильном телефоне .. "

Ваш ответ на вопрос