Свойства анимации CSS

Определение и использование

Некоторые свойства CSS можно использовать для анимации, что означает, что они могут использоваться в эффектах перехода и т.д.

Свойства анимации можно изменять от одного значения к другому, например, размер, числа, проценты и цвета.

Поддержка браузерами

Числовые значения в таблице указывают на первую версию браузера, которая полностью поддерживает CSS анимацию.

В числовых значениях после -webkit-, -moz- или -o- указывается первая версия использования префикса.

43.0
4.0 -webkit-
10.0 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

实例

设置背景颜色从红色到蓝色的动画:

@keyframes mymove {
  from {background-color: red;}
  to {background-color: blue;}
}

亲自试一试

动画相关属性

下面的表格中列出了 CSS 中的动画相关属性:

属性 TIY
background Попробуйте
background-color Попробуйте
background-position Попробуйте
background-size Попробуйте
border Попробуйте
border-bottom Попробуйте
border-bottom-color Попробуйте
border-bottom-left-radius Попробуйте
border-bottom-right-radius Попробуйте
border-bottom-width Попробуйте
border-color Попробуйте
border-left Попробуйте
border-left-color Попробуйте
border-left-width Попробуйте
border-right Попробуйте
border-right-color Попробуйте
border-right-width Попробуйте
border-spacing Попробуйте
border-top Попробуйте
border-top-color Попробуйте
border-top-left-radius Попробуйте
border-top-right-radius Попробуйте
border-top-width Попробуйте
bottom Попробуйте
box-shadow Попробуйте
clip Попробуйте
color Попробуйте
column-count Попробуйте
column-gap Попробуйте
column-rule Попробуйте
column-rule-color Попробуйте
column-rule-width Попробуйте
column-width Попробуйте
columns Попробуйте
filter Попробуйте
flex Попробуйте
flex-basis Попробуйте
flex-grow Попробуйте
flex-shrink Попробуйте
font Попробуйте
font-size Попробуйте
font-size-adjust
font-stretch
font-weight Попробуйте
grid Попробуйте
grid-area Попробуйте
grid-auto-columns Попробуйте
grid-auto-flow Попробуйте
grid-auto-rows Попробуйте
grid-column Попробуйте
grid-column-end Попробуйте
grid-column-gap Попробуйте
grid-column-start Попробуйте
grid-gap Попробуйте
grid-row Попробуйте
grid-row-end Попробуйте
grid-row-gap Попробуйте
grid-row-start Попробуйте
grid-template Попробуйте
grid-template-areas Попробуйте
grid-template-columns Попробуйте
grid-template-rows Попробуйте
height Попробуйте
left Попробуйте
letter-spacing Попробуйте
line-height Попробуйте
margin Попробуйте
margin-bottom Попробуйте
margin-left Попробуйте
margin-right Попробуйте
margin-top Попробуйте
max-height Попробуйте
max-width Попробуйте
min-height Попробуйте
min-width Попробуйте
object-position Попробуйте
opacity Попробуйте
order Попробуйте
outline Попробуйте
outline-color Попробуйте
outline-offset Попробуйте
outline-width Попробуйте
padding Попробуйте
padding-bottom Попробуйте
padding-left Попробуйте
padding-right Попробуйте
padding-top Попробуйте
perspective Попробуйте
perspective-origin Попробуйте
right Попробуйте
text-decoration-color Попробуйте
text-indent Попробуйте
text-shadow Попробуйте
top Попробуйте
transform Попробуйте
transform-origin Попробуйте
vertical-align Попробуйте
visibility
width Попробуйте
word-spacing Попробуйте
z-index Попробуйте