Ατрибούτα που Συνδέονται με την Κίνηση του 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 Προσπαθήστε
CSS εστίαση ιδιότητα Προσπαθήστε