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
-
Economics & Finance
Front End Technology Articles
Page 533 of 652
Set an animation with the same speed from start to end with CSS
The CSS animation-timing-function property with the linear value creates animations that maintain the same speed from start to end, without any acceleration or deceleration. Syntax selector { animation-timing-function: linear; } Example: Linear Animation The following example demonstrates a box moving horizontally with constant speed − .container { position: relative; height: 150px; background-color: #f0f0f0; ...
Read MoreSet a delay for the start of an animation with CSS
The CSS animation-delay property is used to set a delay before an animation starts. This property allows you to control when an animation begins, creating staggered effects or waiting for user interactions. Syntax selector { animation-delay: time; } Possible Values ValueDescription timeSpecifies the delay time in seconds (s) or milliseconds (ms) 0Default value - no delay Negative valuesAnimation starts immediately but partway through the animation cycle Example: Basic Animation Delay The following example demonstrates a 2-second delay before the animation starts − ...
Read MoreStyle input type button with CSS
The input type button can be a submit button or reset button. With CSS, we can style any button on a web page to enhance its appearance and user experience. Syntax input[type=button] { property: value; } Example 1: Basic Button Styling The following example demonstrates how to style an input type button with background color, padding, and hover effects − input[type=button] { background-color: #ff6600; ...
Read MoreShorthand property to set all the animation properties with CSS
The CSS animation property is a shorthand that allows you to set multiple animation properties in a single declaration. It combines animation duration, name, timing function, delay, iteration count, direction, fill mode, and play state into one convenient property. Syntax selector { animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name; } Possible Values PropertyDescriptionDefault animation-nameSpecifies the name of the @keyframes rulenone animation-durationSpecifies how long the animation takes0s animation-timing-functionSpecifies the speed curveease animation-delaySpecifies when the animation starts0s animation-iteration-countSpecifies how many times to ...
Read MoreCSS animation-timing-function property
The CSS animation-timing-function property specifies the speed curve of an animation. It defines how an animation progresses during its duration, controlling whether the animation starts slow and speeds up, starts fast and slows down, or maintains a constant speed. Syntax animation-timing-function: value; Possible Values ValueDescription easeSlow start, fast middle, slow end (default) ease-inSlow start, then fast ease-outFast start, then slow ease-in-outSlow start, fast middle, slow end linearConstant speed throughout cubic-bezier(x1, y1, x2, y2)Custom timing function Example: Different Timing Functions The following example demonstrates various timing functions applied to animated boxes ...
Read MoreCSS animation-play-state property
The CSS animation-play-state property controls whether an animation is currently running or paused. This property is particularly useful for creating interactive animations that can be controlled dynamically. Syntax selector { animation-play-state: running | paused; } Possible Values ValueDescription runningThe animation is currently running (default value) pausedThe animation is paused Example: Paused Animation The following example shows an animation that is set to paused state − .box { width: ...
Read MoreCSS animation-name property
The CSS animation-name property specifies the name of the @keyframes animation to apply to an element. This property links an element to its corresponding keyframe animation definition. Syntax selector { animation-name: keyframe-name; } Possible Values ValueDescription keyframe-nameName of the @keyframes animation to apply noneNo animation is applied (default) Example: Color Animation The following example demonstrates how to use the animation-name property to apply a color transition animation − div { ...
Read MoreCSS animation-iteration-count property
The CSS animation-iteration-count property specifies the number of times an animation should be played. By default, animations run once, but you can control how many times they repeat. Syntax selector { animation-iteration-count: value; } Possible Values ValueDescription numberSpecifies how many times the animation should be played (e.g., 1, 2, 3) infiniteThe animation will repeat forever Example: Finite Iteration Count The following example shows an animation that runs exactly 3 times − .box { ...
Read MoreCSS border-box Value
The CSS background-origin property with the border-box value specifies that the background image should start from the upper left corner of the border area. This allows the background to extend under the border, creating a unique visual effect where the background is visible through transparent or partially transparent borders. Syntax selector { background-origin: border-box; } Example: Comparing Background Origin Values The following example demonstrates the difference between padding-box, border-box, and content-box values − .demo-box { ...
Read MoreSelects every element whose href attribute value contains the substring "java" with CSS
The CSS [attribute*="value"] selector is used to select elements whose attribute value contains a specified substring. This attribute selector is particularly useful when you need to target elements based on partial attribute matches. Syntax [attribute*="value"] { /* CSS properties */ } Where attribute is the HTML attribute name and value is the substring to search for within that attribute's value. Example: Selecting Links Containing "java" The following example demonstrates how to select all anchor elements whose href attribute contains the substring "java" − ...
Read More