CSS Animation
<!DOCTYPE html>
<html lang="en">
</html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation</title>
</head>
<style>
div {
width: 100px;
height: 100px;
background-color: blueviolet;
margin-bottom: 10px;
position: relative;
/* animation-name: example1;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: 3;
animation-direction: alternate;
animation-fill-mode: forwards; */
/* Same as above */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
animation: example1 5s linear 2s 3 alternate forwards;
animation-play-state: running;
}
#div1 {
animation-timing-function: linear;
}
#div2 {
animation-timing-function: ease;
}
#div3 {
animation-timing-function: ease-in;
}
#div4 {
animation-timing-function: ease-out;
}
#div5 {
animation-timing-function: ease-in-out;
}
/* @keyframes example1{
from {background-color: blueviolet; left: 0px; top: 0px;}
to {background-color: chartreuse; left: 200px; top: 0px;}
}
Same as Above but can use more than two animations */
@keyframes example1 {
0% {
background-color: yellow;
left: 0px;
/*left: 0px; top: 0px;*/
}
25% {
background-color: chartreuse;
left: 100px;
/*left: 200px; top: 0px;*/
}
50% {
background-color: blue;
left: 250px;
/* left: 200px; top: 200p;*/
}
75% {
background-color: springgreen;
left: 350px;
/* left: 0px; top: 200px;*/
}
100% {
background-color: crimson;
left: 400px;
/* left: 0px; top: 0px;*/
}
}
</style>
<body>
<div id="div1">CSS Animation Box</div>
<div id="div2">CSS Animation Box</div>
<div id="div3">CSS Animation Box</div>
<div id="div4">CSS Animation Box</div>
<div id="div5">CSS Animation Box</div>
</body>
</html>
No comments:
Post a Comment