CSS - Animation
An animation lets an element gradually change from one style to another.
Syntax animation: animation-name animation-duration
animation-timing-function animation-delay
animation-iteration-count animation-direction
animation-fill-mode animation-play-state;
Property Values:
● animation-name: It is used to specify the name of the @keyframes describing the animation.
● animation-duration: It is used to specify the time duration and it takes animation to complete one
cycle.
● animation-timing-function: It is used to specify how the animation makes transitions through
keyframes.
CSS - Animation
Property Values:
● animation-delay: It is used to specify the delay when the animation starts.
● animation-iteration-count: It is used to specify the number of times the animation
will repeat. It can specify as infinite to repeat the animation indefinitely.
● animation-direction: It is used to specify the direction of the animation.
● animation-fill-mode: It is used to specify what values are applied by the animation
before and after it is executed.
● animation-play-state: It is used to allow you to play/pause the animation.
CSS - Animation
An animation lets an element gradually change from one style to another.
To use CSS animation, you must first specify some keyframes for the
animation.
Keyframes hold what styles the element will have at certain times.
@keyframes Rule
@keyframes rule is used to control steps in an animation sequence by defining CSS
styles for points along animation sequence.
Specify when style change will happen in percent, or with keywords "from" and "to",
which is same as 0% and 100%. 0% is the beginning of animation, 100% is when
animation is complete.
Tip: For best browser support, you should always define both the 0% and the
100% selectors.
CSS - Animation - @keyframes Rule
Syntax
@keyframes name {
keyframes-selector {css-styles;}
keyframes-selector {css-styles;}
...
}
Where
name - Required. Defines a name for the keyframe
keyframes-selector - Required. Points along the animation sequence.
Legal values: 0-100%
from (same as 0%)
to (same as 100%)
Note: You can have many keyframes-selectors in one animation sequence
css-styles - Required. One or more CSS properties and values
CSS - Animation
animation-duration
The animation-duration property defines how long an animation
should take to complete.
If the animation-duration property is not specified, no animation
will occur, because the default value is 0s (0 seconds).
Set How Many Times an Animation Should Run
The animation-iteration-count property specifies the
number of times an animation should run.
The following example binds the
"example" animation to the <div>
element. The animation will last for 4
seconds, and it will gradually change
the background-color of the <div>
element from "red" to "yellow":
CSS - Animation
CSS transform property applies a 2D or 3D transformation to an element. This property
allows to rotate, scale, move, and skew elements.
CSS translate() Function
translate() - function moves an element from its current position (according to the parameters
given for the X-axis and the Y-axis).
translate() function is used within the transform property.
Syntax
translate(x, y)
x - Required. A number or percent that defines how much the element should move along
x-axis y - Optional. A number or percent that defines how much element should move along
the y-axis. If omitted, value is set to 0.
CSS - Animation
CSS transform property applies a 2D or 3D transformation to an element.
This property allows to rotate, scale, move, and skew elements.
CSS translateX() Function
CSS translateX() function allows to re-position element along x-axis (horizontally).
The translateX() function is used within the transform property.
Syntax
translateX(x)
x - Required. A number or percent that defines how much the element
should move along the x-axis
CSS - Animation
CSS transform property applies a 2D or 3D transformation to an element.
This property allows to rotate, scale, move, and skew elements.
CSS translateY() Function
CSS translateY() function allows to re-position an element along y-axis (vertically).
The translateY() function is used within the transform property.
Syntax
translateY(y)
y - Required. A number or percent that defines how much the element
should move along the y-axis
How to Create Scrolling Text in CSS - To create scrolling text, use
CSS animations paired with transform: translateX and transform: translateY
properties.
CSS Horizontal Scrolling Text: Right-to-Left
● To make text scroll right-to-left, place it inside a div with the id scroll-text . This
element will move inside its container div, scroll-container .
● For right-to-left scrolling text, positive and negative translateX values are 100%
to -100%
CSS Horizontal Scrolling Text: Left-to-Right
● To make text scroll left-to-right, place it inside a div with the id scroll-text . This
element will move inside its container div, scroll-container .
● For left-to-right scrolling text,the positive and negative translateX values are
-100% to 100%
How to Create Scrolling Text in CSS - To create scrolling text, use
CSS animations paired with transform: translateX and transform: translateY
properties.
CSS Horizontal Scrolling Text: Top-to-Bottom
● To make text scroll top-to-bottom, place it inside a div with the id scroll-text . This
element will move inside its container div, scroll-container .
● For top-to-bottom scrolling text, positive and negative translateY values are -100%
to 100%
CSS Horizontal Scrolling Text: Bottom-to-Top
● To make text scroll bottom-to-top, place it inside a div with the id scroll-text . This
element will move inside its container div, scroll-container .
● For bottom-to-top scrolling text,the positive and negative translateY values are
100% to -100%
CSS - Animation
How to Create Blinking Text
To show some text on the website that must be highlighted the text, then we
can use the blinking effect.
Use @keyframe and the opacity property to set the blinking opacity on
defined timeframes.
CSS Opacity / Transparency
The opacity in CSS is the property of an element that describes the
transparency of the element.
It is the opposite of transparency & represents the degree to which the content
will be hidden behind an element.
CSS - Animation
How to Create Blinking Text
CSS Opacity / Transparency
The value of opacity lies between 0.0 to 1.0 where a low value represents high
transparency and a high value represents low transparency.
The percentage of opacity is calculated as Opacity% = Opacity * 100.
CSS - Animation
CSS transform property applies a 2D or 3D transformation to an element. This property
allows to rotate, scale, move, and skew elements.
CSS transform property 2D transformation function such as
● translate() - function moves an element from its current position (according to the
parameters given for the X-axis and the Y-axis).
● rotate() - function rotates an element clockwise or counter-clockwise according to a
given degree.
● scale() - function increases or decreases the size of an element (according to the
parameters given for the width and height).
● skewX() - function skews an element along the X-axis by the given angle.
● skewY() - function skews an element along the Y-axis by the given angle.
● skew() - function skews an element along the X and Y-axis by the given angles.
● matrix() -function combines all the 2D transform functions into one.
Write a program to get the below output(scrolling text) using
HTML and CSS