What is the CSS Animation
How to create css animations?
The animation is the change one scene to another scene. CSS animation depends on the CSS properties, we can use CSS animation with all numeric CSS value.
As below example:
Code Demo
Animation Shorthand Property
animation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction
How many type of the animation-timing-function?
linear, ease(default value), ease-in, ease-out, ease-in-out, step-start, step-end, steps(int,start|end), cubic-bezier(n,n,n,n), initial, inherit
what is animation direction?
animation direction indicates that this is going to forwards or backward. It has four property normal: means this is forwards, reverse: means this is backward,
alternate: when start then go to the direction of the forwards and then go to backward it's cycling continues. And last is alternate-reverse: it's starting backward first then forwards it continues again and again.
CSS animation example as given screenshot:
The animation is the change one scene to another scene. CSS animation depends on the CSS properties, we can use CSS animation with all numeric CSS value.
As below example:
<style>
.anythingAnimation{
-webkit-animation: anyName 2s infinite;
animation: anyName 2s infinite;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
height: 100px; text-align: center; }
@-webkit-keyframes anyName {
0% { font-size: 16px}
50% {
font-size: 40px; font-weight: 700}
100% {
font-size: 16px;}
}
@keyframes anyName {
0% { font-size: 16px}
50% {
font-size: 40px; font-weight: 700}
100% {
font-size: 16px;}
}
.anythingNewAanimation {
background: #0bf;
font: normal 20px arial;
-webkit-animation: animationName 2s infinite;
animation: animationName 2s infinite;
color: #fff; text-align: center; padding: 20px;
max-width: 400px;
margin: 20px auto;
}
@-webkit-keyframes animationName {
from {background: #0bf;}
to {background: 0b6;}
}
@keyframes animationName {
from {background: #0bf;}
to {background: #0b6;}
}
</style>
<div class="anythingAnimation">CSS Animations.</div>
<div class="anythingNewAanimation">CSS Animations changed
background color.</div>
Code Demo
Animation Shorthand Property
animation: animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction
How many type of the animation-timing-function?
linear, ease(default value), ease-in, ease-out, ease-in-out, step-start, step-end, steps(int,start|end), cubic-bezier(n,n,n,n), initial, inherit
what is animation direction?
animation direction indicates that this is going to forwards or backward. It has four property normal: means this is forwards, reverse: means this is backward,
alternate: when start then go to the direction of the forwards and then go to backward it's cycling continues. And last is alternate-reverse: it's starting backward first then forwards it continues again and again.
CSS animation example as given screenshot:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0;
padding: 0;
font: normal 16px arial;
}
.mainContainer {
max-width: 400px;
margin: 10px auto;
background: #eee;
padding: 20px 30px;
}
.animateSec {
position: relative;
}
.animateButton {
position: fixed;
bottom: 30px;
right: 10px;
background: #0bf;
padding: 10px 20px;
color: #fff;
border-radius: 5px;
}
.move {
animation: MainRotation 5s infinite linear 2s;
}
.moveText {
animation: MainRotationText 5s infinite linear 2s;
}
@keyframes MainRotation {
0% {
right: 10px;
}
50% {
right: -400px
}
100% {
right: -400px
}
}
@-webkit-keyframes MainRotation {
0% {
right: 10px;
}
50% {
right: -400px
}
100% {
right: -400px
}
}
@keyframes MainRotationText {
0% {
top: 30px
}
50% {
top: 30px
}
75% {
top: -500px
}
100% {
top: 30px
}
}
@-webkit-keyframes MainRotationText {
0% {
top: 30px
}
50% {
top: 30px
}
75% {
top: -500px
}
100% {
top: 30px
}
}
</style>
</head>
<body>
<div class="mainContainer">
<div class="animateSec moveText">Sheo Sagar ....<br><br><br>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was
popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<br><br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
<br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
<br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
<br><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of
Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like
Aldus PageMaker including versions of Lorem Ipsum.
<br><br>
End...
</div>
<div class="animateButton move">Any Button</div>
</div>
</body>
</html>
No comments:
Note: Only a member of this blog may post a comment.