css animation animation-range

תפריט ראשי

מבוא ל-CSSצבעים ב-CSSפונקציות CSSמחולל דוגמאות CSSטיפים וטריקים ב CSSאודות אתר סי.אס.אס. גייד

מאפייני CSS

@charset@color-profile@container@counter-style@font@import@keyframes@layer@media@namespace@page@property@supportsaccent-coloralignalignment-baselineallanchoranimationanimation-compositionanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-rangeanimation-range-endanimation-range-startanimation-timelineanimation-timing-functionanimation-triggerappearanceaspect-ratiobackdrop-filterbackface-visibilitybackgroundbaselineblockbookmarkborderbottomboxbreakcaption-sidecaretclearclipcolorcolumncolumnscontaincontainercontentcornercountercursorcxcyddirectiondisplaydominant-baselinedynamic-range-limitempty-cellsfield-sizingfillfilterflexfloatfloodfontforced-color-adjustgapglyph-orientation-verticalgridhanging-punctuationheighthyphenatehyphensimageime-modeinitialinlineinsetinteractivityinterestinterpolate-sizeisolationjustifyleftletter-spacinglighting-colorlinelistmarginmarkermaskmasonry-auto-flowmathmaxminmix-blend-modenavobjectoffsetopacityorderorphansoutlineoverflowoverlayoverscrollpaddingpagepaint-orderperspectiveplacepointer-eventspositionprint-color-adjustquotesrreadingresizerightrotaterow-gaprubyrxryscalescrollscrollbarshapespeak-asstopstring-setstroketab-sizetable-layouttexttimelinetoptouch-actiontransformtransitiontranslatetrigger-scopeunicode-bidiuser-selectvector-effectvertical-alignviewvisibilitywhitewidowswidthwill-changewordwrapwriting-modexyz-indexzoom

✔️ animation-range CSS Style Property

המאפיין animation-range קיצור דרך לקביעת תחום ה-scroll timeline שבו האנימציה פעילה.

דוגמא: הגדרת תחילת וסוף טווח אנימציה מונעת גלילה לאורך ציר הזמן שלה

Demo Panel:
CSS: 111
HTML: 222
Syntax:

Valid values:
  • normal, cover, contain, entry, exit, entry-crossing, exit-crossing

Js Syntax: element.style.animationRange

תאימות דפדפנים

אודות | הצהרת פרטיות | צור קשר