CSS - animation
animation
binds an animation to an element, short hand for animation- individual elements.
the following demo binds the animation name my-animation to the demo element
Property Variable Name
animationAvailable Values for animation
name duration timing-function delay iteration-count direction fill-mode play-stateExamples Using animation values
Example using animation name duration timing-function delay iteration-count direction fill-mode play-state
Example using animation name duration timing-function delay iteration-count direction fill-mode play-state
Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3
Demo Box 1 Content 1
Demo Box 1 Content 2
Demo Box 1 Content 3
Code
<style>
@keyframes my-animation {
0% {padding-top: 0px;}
50% {padding-top: 200px;}
100% {padding-top: 0px;}
}
</style>
<style>
.demo-box-1 {
border-radius:3px;
margin-bottom:10px;
border:1px solid #000;
height:220px;
width:100%;
}
.demo-box-1 span {
display:inline-block;
padding:10px;
background:#3b7aa0;
color:#FFF;
margin:0 1%;
}
.dbs-1 {
animation: my-animation 3s infinite;
}
.dbs-2 {
animation: my-animation 2s infinite;
}
.dbs-3 {
animation: my-animation 5s infinite;
}
</style>
<h2>Example using animation name duration timing-function delay iteration-count direction fill-mode play-state</h2>
<p>Here is an example using different animation length values on dbs-1, dbs-2 and dbs-3</p>
<div class='demo-box-1'>
<span class='dbs-1'>Demo Box 1 Content 1</span>
<span class='dbs-2'>Demo Box 1 Content 2</span>
<span class='dbs-3'>Demo Box 1 Content 3</span>
</div>