Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
CSS Articles
Page 104 of 130
With CSS set the element to retain the style values that are set by the last keyframe
To set the elements to retain the style values set by the first keyframe, use the animation-fill-mode property with the forwards value.ExampleLive Demo div { width: 150px; height: 200px; position: relative; background: red; animation-name: myanim; animation-duration: 2s; animation-fill-mode: forwards; } @keyframes myanim { from {left: 0px; background-color: green;} to {left: 200px; background-color: blue;} }
Read MoreExtend the animation properties in both directions with CSS
Use the animation-fill-mode property with the value both to extend the animation properties in both directions.ExampleLive Demo div { width: 150px; height: 200px; position: relative; background: red; animation-name: myanim; animation-duration: 2s; animation-fill-mode: both; } @keyframes myanim { from {left: 0px; background-color: green;} to {left: 200px; background-color: blue;} }
Read MoreHow to set the fill-mode for an Animation with CSS
To set the fill-mode for an animation with CSS, use the animation-fill-mode property. It has the values forwards, backward, both for both the directions, etc.You can try to run the following code to set the fill-mode for animation;ExampleLive Demo div { width: 150px; height: 200px; position: relative; background: red; animation-name: myanim; animation-duration: 2s; animation-fill-mode: forwards; } @keyframes myanim { from {left: 0px; background-color: green;} to {left: 200px; background-color: blue;} }
Read MoreSet an animation with a slow start and end using CSS
Use the animation-timing-function property, with the ease-in-out value to set animation with a slow start and end with CSS:ExampleLive Demo div { width: 150px; height: 200px; position: relative; background-color: #808000; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo {animation-timing-function: ease-out;} ease-in-out effect
Read MoreSet an animation with a slow start, then fast, and end slowly with CSS
Use the animation-timing-function property, with the ease value to set animation with a slow start, then fast, to end slowly with CSSExampleLive Demo div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { from {left: 100px;} to {left: 200px;} } #demo1 {animation-timing-function: ease;} ease effect
Read MoreSelects all elements with class="mydemo" with CSS
To select all elements with class=”mydemo”, you can try to run the following code. Use the .class CSS selector to achieve this,ExampleLive Demo .demo { border: 2px dashed orange; } Heading 1 Heading 1 Heading 2
Read MoreRun Animation backward first and then forwards with CSS
Use the animation-direction property to run animation in first backward and then forward. The property is used with the alternate-reverse animation value to achieve this.ExampleLive Demo div { width: 150px; height: 200px; position: relative; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-direction: alternate-reverse; animation-iteration-count: 3; } @keyframes myanim { 0% {background-color:green; left:0px; top:0px;} 50% {background-color:maroon; left:100px; top:100px;} 100% {background-color:gray; left:0px; top:0px;} }
Read MoreSelect elements whose attribute value contains a specified value with CSS
To select elements whose attribute value contains a specified value, use the [attribute*=”value”] selector.You can try to run the following code to implement the CSS [attribute*="value"] selector,ExampleLive Demo [alt* = "tut"] { border: 5px solid orange; border-radius: 5px; }
Read MoreSelects every <a> element whose href attribute value ends with ".htm" with CSS
Use the [attribute$=”value”] selector to select elements whose attribute value ends with a specified value i.e. “.htm” here.You can try to run the following code to implement the CSS [attribute$="value"] Selector,ExampleLive Demo [href$ = htm] { border: 5px solid orange; border-radius: 5px; } Java Tutorial Java Tutorial PDF
Read MoreHow to delay an animation with CSS
To delay an animation, use the CSS animation-delay property. You can try to run the following code to delay animationExampleLive Demo div { width: 150px; height: 200px; background-color: yellow; animation-name: myanim; animation-duration: 2s; animation-delay: 2s; } @keyframes myanim { from { background-color: green; } to { background-color: blue; } }
Read More