Class KeyframeEffect

Namespace

CSharpToJavaScript.APIs.JS

Assembly

CSharpToJavaScript.dll

The KeyframeEffect interface of the Web Animations API lets us create sets of animatable properties and values, called keyframes. These can then be played using the Animation(AnimationEffect?, AnimationTimeline?) constructor.

[Value("KeyframeEffect")]
public class KeyframeEffect : AnimationEffect

Inheritance

object

AnimationEffect

KeyframeEffect

Inherited Members

AnimationEffect.Before(params AnimationEffect[])

AnimationEffect.After(params AnimationEffect[])

AnimationEffect.Replace(params AnimationEffect[])

AnimationEffect.Remove()

AnimationEffect.GetTiming()

AnimationEffect.GetComputedTiming()

AnimationEffect.UpdateTiming(OptionalEffectTiming)

AnimationEffect.Parent

AnimationEffect.PreviousSibling

AnimationEffect.NextSibling

object.GetType()

object.MemberwiseClone()

object.ToString()

object.Equals(object)

object.Equals(object, object)

object.ReferenceEquals(object, object)

object.GetHashCode()

Remarks

-Web Animations API
-Animation

See also on MDN

Constructors

KeyframeEffect()

public KeyframeEffect()

KeyframeEffect(Element?, Object?, Union167)

The KeyframeEffect() constructor of the Web Animations API returns a new KeyframeEffect object instance, and also allows you to clone an existing keyframe effect object instance.

public KeyframeEffect(Element? target, Object? keyframes, Union167 options = default)

Parameters

target Element

keyframes Object

options Union167

Remarks

-KeyframeEffect Interface
-Web Animations API
-Animation

See also on MDN

KeyframeEffect(KeyframeEffect)

The KeyframeEffect() constructor of the Web Animations API returns a new KeyframeEffect object instance, and also allows you to clone an existing keyframe effect object instance.

public KeyframeEffect(KeyframeEffect source)

Parameters

source KeyframeEffect

Remarks

-KeyframeEffect Interface
-Web Animations API
-Animation

See also on MDN

Properties

Composite

The composite property of a KeyframeEffect resolves how an element's animation impacts its underlying property values.

[Value("composite")]
public CompositeOperation Composite { get; set; }

Property Value

CompositeOperation

To understand these values, take the example of a keyframeEffect value of blur(2) working on an underlying property value of blur(3).

Remarks

-Web Animations API
-Property of KeyframeEffect objects
-Composite operation

See also on MDN

IterationComposite

The iterationComposite property of a KeyframeEffect resolves how the animation's property value changes accumulate or override each other upon each of the animation's iterations.

[Value("iterationComposite")]
public IterationCompositeOperation IterationComposite { get; set; }

Property Value

IterationCompositeOperation

One of the following:

Remarks

-Web Animations API
-Property of both KeyframeEffect objects.

See also on MDN

PseudoElement

The pseudoElement property of a KeyframeEffect interface is a string representing the pseudo-element being animated. It may be null for animations that do not target a pseudo-element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.

[Value("pseudoElement")]
public string? PseudoElement { get; set; }

Property Value

string

A string or null.

Remarks

NOTE

If set to the legacy single-colon syntax of {{cssxref("::before", ":before")}}, {{cssxref("::after", ":after")}}, {{cssxref("::first-letter", ":first-letter")}}, or {{cssxref("::first-line", ":first-line")}}, the string is transformed into its double-colon modern version ({{cssxref("::before")}}, {{cssxref("::after")}}, {{cssxref("::first-letter")}}, and {{cssxref("::first-line")}}, respectively).

-Web Animations API
-KeyframeEffect interface
-KeyframeEffect(Element?, Object?, Union167) constructor
-Target property

See also on MDN

Target

The target property of a KeyframeEffect interface represents the element or pseudo-element being animated. It may be null for animations that do not target a specific element. It performs as both a getter and a setter, except with animations and transitions generated by CSS.

[Value("target")]
public Element? Target { get; set; }

Property Value

Element

An Element or null.

Remarks

-Web Animations API
-Property of KeyframeEffect objects.

See also on MDN

Methods

GetKeyframes()

The getKeyframes() method of a KeyframeEffect returns an Array of the computed keyframes that make up this animation along with their computed offsets.

[Value("getKeyframes")]
public List<Object> GetKeyframes()

Returns

List<Object>

Returns a sequence of objects with the following format:

Remarks

-Web Animations API
-Method of KeyframeEffect objects.

See also on MDN

SetKeyframes(Object?)

The setKeyframes() method of the KeyframeEffect interface replaces the keyframes that make up the affected KeyframeEffect with a new set of keyframes.

[Value("setKeyframes")]
public GlobalObject.Undefined SetKeyframes(Object? keyframes)

Parameters

keyframes Object

Returns

GlobalObject.Undefined

None (GlobalObject.Undefined).

Remarks

-KeyframeEffect Interface
-Web Animations API

See also on MDN