The animationDuration property is used to specify the length of time it will take for an animation to complete a cycle.SyntaxFollowing is the syntax for −Setting the animationDuration property −object.style.animationDuration = "time|initial|inherit"ValuesFollowing are the values −ValueDescriptionTimeFor mentioning the time in seconds or milliseconds to wait before the animation starts. The default value for time is 0.initialFor setting this property to initial value.inheritTo inherit the parent property valueExampleLet us look at an example for the animationDuration property −Live Demo    div {       width: 25px;       height: 25px;       border-radius: 50%;   ... Read More

The animationDirection property is used to specify the direction of animation which may be forwards, backwards or alternating.SyntaxFollowing is the syntax for −Setting the animationDirection property −object.style.animationDirection = "normal|reverse|alternate|alternate-reverse|initial|inherit"ValuesFollowing are the values −ValueDescriptionNormalThis is the default value indicating that the animation should play normal.ReverseFor indicating that the animation should play in reverse.AlternateFor making the animation played as normal on odd time and reverse direction in even time.alternate-reverseThis is the reverse of the alternate and plays e animation in reverse direction every odd time and in a normal direction every even time.InitialFor setting this property to initial valuenheritInherits this property from ... Read More

The animationDelay property is used to specify the start time for the animation sequence. We can set it to start immediately, after a time interval or midway.SyntaxFollowing is the syntax for −Setting the animationDelay property −object.style.animationDelay = "time|initial|inherit"ValuesFollowing can be the values −ValueDescriptiontimeFor mentioning the time in seconds or milliseconds to wait before the animation starts. The default value for time is 0.initialFor setting this property to initial value.inheritTo inherit the parent property value.ExampleLet us look at the example for the animationDelay property −Live Demo    #box {       width: 50px;       height: ... Read More

CSS allows us to animate transitions of elements’ properties. We use the animation property to define our desired styles. We can combine properties like animation-name, animation-duration, animation-iteration-count, etc. using the animation keyword.SyntaxThe syntax of animation property is as follows −object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"ValuesFollowing are the values −ValueDescriptionanimation-nameFor specifying the keyframe name to bind the selector to.animation-durationTo specifiy the time duration of the animation(in seconds or milliseconds) for completion.animation-timing-functionTo specify the animation speed curve.animation-delayTo specify some delay before the animation startsanimation-iteration-countTo specify the no of time an animation should be playedanimation-directionTo indicate if the animation ... Read More

The HTML DOM alignSelf property is used for specifying a given item alignment present inside a flexible container. The alignSelf property is used to override the specified align-items value in an element’s grid or flex display layout.SyntaxFollowing is the syntax for −Setting the alignSelf property −object.style.alignSelf = "auto|stretch|center|flex-start|flex-end|baseline|initial|inherit"ValuesFollowing are the values of the alignSelf property −ValueDescriptionStretchIt is the default value and used to stretch the items to fit the container.CenterThis is used for positioning the items at the center of the container.flex-startTo position items at the beginning of the container.flex-endTo position the items at the end of the container.baselineTo position ... Read More

The HTML DOM Style alignItems property is used for mentioning the items default alignment that are present inside a flexible container.SyntaxFollowing is the syntax for −Setting the alignItems property −object.style.alignContent = " stretch|center|flex-start|flex-end|baseline|initial|inherit"ValuesFollowing can be the values −ValueDescriptionStretchIt is the default value and used to stretch the items to fit the container.CenterThis is used for positioning the items at the center of the container.flex-startTo position items at the beginning of the container.flex-endTo position the items at the end of the container.baselineTo position the items at the container baselineinitialFor setting this property to initial value.InheritTo inherit the parent property value.ExampleLet us ... Read More

The alignContent property is used to align items in a flexbox or grid. It is used to align items on the vertical axis when they do not use all the available space.SyntaxFollowing is the syntax for −Setting the alignContent property −object.style.alignContent = "stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit"ValuesFollowing are the values −ValueDescriptionStretchIt is the default value and used to stretch the items to fit the container.CenterThis is used for positioning the items at the center of the container.flex-startTo position items at the beginning of the container.flex-endTo position the items at the end of the container.space-betweenTo position the items with space between the lines.space-aroundTo position the ... Read More

The HTML DOM Strong object is associated with the HTML element. The strong tag is used for strong emphasis and makes the text bold. We can create and access strong element using the createElement() and getElementById() method respectively.SyntaxFollowing is the syntax for −Creating a strong object −Var s= document.createElement("STRONG");ExampleLet us look at an example for the strong object −Live Demo Strong object example Create a strong element by clicking the below button CREATE This is some text inside the p element    function createStrong() {       var s = document.createElement("STRONG");       var ... Read More

The HTML DOM Storage setItem() method is used for removing a storage object item by passing a given key name.SyntaxFollowing is the syntax for Storage removeItem() method −localStorage.removeItem(keyname, value);ORsessionStorage.removeItem(keyname, value );Here, keyname is of type string and represents the key name used for getting the value. The second parameter value represents the new value that will replace the old value.ExampleLet us look at the example for the Storage setItem() method −Live Demo Storage setItem() method example Create the localstorage item by clicking the below button CREATE Display the localstorage item by clicking the below button DISPLAY ... Read More

The HTML DOM Storage removeItem() method is used for removing a storage object item by passing a given key name.SyntaxFollowing is the syntax for Storage removeItem() method −localStorage.removeItem(keyname);ORsessionStorage.removeItem(keyname);Here, keyname is of type string and represents the name of the item to be removed.ExampleLet us look at the example for the Storage removeItem() method − Storage removeItem() method example Delete the localstorage item by clicking the below button DISPLAY    localStorage.setItem("TEXT1", "HELLO WORLD");    function itemDelete() {       localStorage.removeItem("TEXT1");       itemShow();    }    function itemShow() {       var x = ... Read More