编程知识 cdmana.com

CSS animation

Abbreviated attribute

animation: [<animation-duration>||<animation-timing-function>||<animation-delay>||<animation-iteration-count>||<animation-direction>||<animation-fill-mode>||<animation-play-state>||<animation-name>]
 Initial value :0s ease 0s 1 normal none running none
  • take animation-name Written on the last side is to consider that the identifier of an animation may be the same as the attribute value of an animation ( Without this habit , It's OK to write at the front , It's easier to read ), Then the animation identifier will not be interpreted as animation-name Value , Unless you write the same value again
  • Change the visible element to the attribute display:none;, Then it changes to visible , The animation will replay

Keyframes

 Keyframe block >>> Keyframes 
@keyframes animation_identifier {
  keyframe_selector {
    property: value;
    property: value;
  }
  keyframe_selector {
    property: value;
    property: value;
  }
}
  • animation_identifier( Keyframe identifier ) As animation-name Value

  • keyframe_selector( Key selector ) Use from or to Or a percentage ( Not for [0,1] Decimals of

  • If there are duplicate keys 、 Repeated attribute , But the value is different , Then it will be covered by the following key frames

  • Don't write 0% perhaps 100% Keyframes , The default attribute value will be used to supplement the key frame (border-radius The default value is none, So it's best to initialize its value )

js edit css Animation

  • Script js Edit animation keys

    var cssRule = document.styleSheets[index].cssRules[index]; // The two here index Is different , The position of the key frame block needs to be determined 
    cssRule.appendRule('keyframe_selector {property: value;}');
    cssRule.deleteRule(...'keyframe_selector');
    cssRule.findRule(...'keyframe_selector');
    
  • Animate three events :animationstartanimationend and animationiteration

    • animationstart Will trigger... At the beginning of the animation , Will be affected by animation delays . An element has more than one animation , Then each animation will trigger this event
    • animationend Will trigger... At the end of the animation playback ( When the animation is played only once )
    • animationiteration It will be triggered after one iteration of the animation and before the next iteration ( Only when the animation plays multiple times )

animation-name

Initial value :none

  • If the property is invalid , Other animation properties will also be invalid

  • At first, the key frame identifier does not exist , But then it becomes effective in some way , Then it will apply

  • One element uses multiple animations , If there are duplicate attributes in these animations , Then the later animation will overwrite the values of the same attributes of the previous animation

animation-duration

Company : second s、 millisecond ms

Initial value :0s

animation-iteration-count

Initial value :1

Value range :[ <number> | infinite ]

  • Property value is not an integer , The animation will end halfway , for example : The value is 1.25, So in the second iteration 25% At the end of
  • The property value is 0, The animation will still play , It also triggers animation Events

animation-direction

Initial value :normal

Value range :[normal|reverse|alternate|alternate-reverse]

  • normal: from 0% To 100%
  • reverse: from 100% To 0%, Also reversed animation-timing-function
  • alternate: from 0% To 100%, Again from 100% To 0%, Then iterate in turn
  • alternate-reverse: from 100% To 0%, Again from 0% To 100%, Then iterate in turn

animation-delay

Initial value :0s

  • A negative delay allows the animation to start playing immediately , But from the middle of the animation , for example : Declared on the element animation-delay: -4s and animation-duration: 10s, The element will start from the... Of the entire animation 40% Start playing immediately at , And in 6s After that .

animation-timing-function

Initial value :ease

Value :[ease|linear|ease-in|ease-out|ease-in-out|step-start|step-end|step(<integer>, start)|step(<integer>, end)|cubic-bezier(<number>, <number>, <number>, <number>)]

  • You can use... In keyframes animation-timing-function, And use the new timing function from this frame , Until the next one overrides the default timing or there is animation-timing-function Declared keyframes
  • Used in keyframes animation-timing-function Can only Acts on attributes defined in the keyframe , Animation that cannot change other attributes

animation-play-state

Initial value :running

Value :[running|paused]

animation-fill-mode

Initial value :none

Value :[none|forwards|backwards|both]

This attribute defines the trigger animationstart Before and after the event animationend How the animation affects the element after the event , Summarized below :

  • 0% Whether the key frame is applied to the element by the animation delay
    • Have an impact on :none、forwards
    • No influence :backwards、both
  • 100% Whether the keyframe attribute continues to affect the element
    • Have an impact on :forwards、both
    • No influence :none、backwards

版权声明
本文为[Your song sounds good]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/10/20211002145410465a.html

Tags css animation
Scroll to Top