Для создания анимационного эффекта в CSS3 используется свойство transition:
transition:0.25s linear opacity;
это сокращенная запись свойств
- transition-property по умолчанию all - применяется ко всем переходам
- transition-duration по умолчанию 0
- moz-transition-timing-function по умолчанию ease
- transition-delay по умолчанию 0
Другие значения moz-transition-timing-function:
- ease
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier
Аналоги свойства transition в разных браузерах:
- -webkit-transition для Chrome
- -moz-transition для Firefox
- -o-transition для Opera
transition:0.25s linear opacity; -webkit-transition:0.25s linear opacity; -moz-transition:0.25s linear opacity; -o-transition:0.25s linear opacity;
Вращение объекта
#idbox{transition:0.25s linear opacity;
-webkit-transition:0.25s linear opacity;
-moz-transition:0.25s linear opacity;
-o-transition:0.25s linear opacity;
}
#idbox:hover{
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari и Chrome */
-o-transform:rotate(360deg); /* Opera */
}