עברית
accent-coloralignalignment-baselineallanchoranimationanimation-compositionanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-rangeanimation-range-endanimation-range-startanimation-timelineanimation-timing-functionanimation-triggerappearanceaspect-ratiobackdrop-filterbackface-visibilitybackgroundbaselineblock-sizeborderbottomboxbreakcaption-sidecaretclearclipcolorcolumncolumnscontaincontainercontentcornercountercursorcxcyddirectiondisplaydominant-baselinedynamic-range-limitempty-cellsfield-sizingfillfilterflexfloatfloodfontforced-color-adjustgapgridheighthyphenatehyphensimageime-modeinitial-letterinline-sizeinsetinteractivityinterestinterpolate-sizeisolationjustifyleftletter-spacinglighting-colorlinelistmarginmarkermaskmathmaxminmix-blend-modeobjectoffsetopacityorderorphansoutlineoverflowoverlayoverscrollpaddingpagepaint-orderperspectiveplacepointer-eventspositionprint-color-adjustquotesrreadingresizerightrotaterowrubyrulerxryscalescrollscrollbarshapespeakstopstroketab-sizetable-layouttexttimelinetoptouch-actiontransformtransitiontranslatetrigger-scopeunicode-bidiuser-selectvector-effectvertical-alignviewvisibilitywhitewidowswidthwill-changewordwriting-modexyz-indexzoom
The CSS Propertie animation
The animation shorthand combines 8 longhands: name, duration, timing-function, delay, iteration-count, direction, fill-mode, play-state. Multiple comma-separated animations allowed. First time = duration, second = delay.
.box {
animation: slide 2s ease-in-out;
}
.box {
animation: slide 2s ease-in 0.5s infinite alternate both, fade 1s linear;
}
min:0
max:10000
step:100
units:ms | s
noneNo animation.infiniteiteration-count: repeats infinitely.normaldirection: normal direction.reversedirection: reversed.alternatedirection: alternates.alternate-reversedirection: alternates, starts reversed.forwardsfill-mode: retains end value.backwardsfill-mode: applies start value during delay.bothfill-mode: both forwards and backwards.runningplay-state: running.pausedplay-state: paused.linearEasing: uniform rate.easeEasing: fast then slows.ease-inEasing: slow start.ease-outEasing: slow end.ease-in-outEasing: slow at edges.step-startEasing: jumps immediately.step-endEasing: jumps at end.
cubic-bezier()Custom curve.steps()Step-wise division.linear()Custom linear easing.
CSS Animations Level 1
Editor's Draft
W3CMDN
CSS
Show all code
Edit CSS online
The plugin that remembers hundreds of CSS items for you
Every CSS property — in a live demonstration
The bilingual CSS reference
previousnext