An animation allows an element gradually change from one style to another.To make animation using css, we must first specify some keyframes for the animation.Keyframes hold what styles the element will have at certain times.When we specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.It can be change in color,position of elements.
To get an animation to work, we must bind the animation to an element.Here we use animation properties to make flash news/breaking news like animation that is a text moves from right to left in a loop.In the following code,we bind an animation “cssMarquee” to h1 tag in a div with class “cssMarqueeDiv”.Animation cssMarquee makes the div to move from right to left and again from right with in 20 seconds.
HTML Code for animation
<html>
<style>
.cssMarqueeDiv {
height: 50px;
overflow: hidden;
position: relative;
}
.cssMarqueeDiv h1 {
font-size: 2em;
color: #ffffff;
background-color: #35b869;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 50px;
text-align: center;
transform:translateX(100%);
animation: cssMarquee 20s linear infinite;
}
@keyframes cssMarquee {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
<div class="cssMarqueeDiv">
<h1>Jobin And Jismi </h1>
</div>
<html> Screenshot : The content will move from right to left and again from right in an infinite loop just like flash news
Different properies that can be set to animation are:
animation-name : Name given to the 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).
animation-delay : The animation-delay property specifies a delay for the start of an animation.
animation-iteration-count : The animation-iteration-count property specifies the number of times an animation should run.In this example we use “infinite” to make the animation continue for ever
animation-direction : The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.The animation-direction property can have the following values:
normal – The animation is played as normal (forwards). This is default
reverse – The animation is played in reverse direction (backwards)
alternate – The animation is played forwards first, then backwards
alternate-reverse – The animation is played backwards first, then forwards
animation-timing-function : animation-timing: function property specifies the speed curve of the animation.Here we use linear – Specifies an animation with the same speed from start to end.
animation-fill-mode :The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).
animation : shorthand property to use all of animation property in single line
So for this example,we use shorthand property
animation: cssMarquee 20s linear infinite;
Reference : https://www.w3schools.com/css/css3_animations.asp