CSS Animasyon İle İlgili Özellikler

Tanım ve kullanım

Bazı CSS özellikleri animasyon yapımında kullanılabilir, bu da onların geçiş gibi etkilerde kullanılabileceği anlamına gelir.

Animasyonu ayarlamak için kullanılabilen özellikler, boyut, sayı, yüzdelik ve renk gibi değerlerden birine diğerine geçiş yapabilir.

Tarayıcı desteği

Tablodaki rakamlar, CSS animasyonunu tamamen destekleyen ilk tarayıcı sürümünü belirtir.

-webkit-、-moz- veya -o- sonrasındaki rakamlar, kullanım öncesi önek olan ilk sürümü belirtir.

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-

Örnek

Arka plan rengini kırmızıdan maviye animasyonu ayarlayın：

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

Kişisel olarak deneyin

Animasyon ilgili özellikler

Aşağıdaki tabloda CSS'teki animasyon ilgili özellikleri listelenmiştir：

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