Hi, I'm Golam Rabbani. Today I will discuss about CSS3.
Greetings! How are you all? Hope everyone is well.
What is CSS3? CSS3 is updated version previous from CSS.
Same style this code but some difference.
Same style this code but some difference.
CSS3 method name Scale.
You have to know some keyword behavior.
Animation: this is name of animation.
If
Animation: ani_name 15s linear infinite;
Animation is standard method.
ani_name is name of animation.
15s is time of duration.
linear is type of animation.
infinite is, this animation always looping.
Let’s go, know about some other keyword.
If -webkit- are supported safari, google chrome.
If -moz- are supported mozila firefox.
If -o- are supported opera mini.
@-webkit-keyframes ani_name {
0% { -webkit-transform: scale(0.1) }
20% { -webkit-transform: scale(0.5)}
40% { -webkit-transform: scale(1)}
60% { -webkit-transform: scale(-1) }
80% { -webkit-transform: scale(-0.5)}
100% { -webkit-transform: scale(-0.1)}
}
-webkit-keyframes this keyframes is operation method.
0% means when position is 0%,
then this animation are start.
then this animation are start.
20% means when position is 20%,
then this animation are start.
then this animation are start.
40% means when position is 40%,
then this animation are start.
then this animation are start.
60% means when position is 60%,
then this animation are start.
then this animation are start.
80% means when position is 80%,
then this animation are start.
then this animation are start.
100% means when position is 100%,
then this animation are start.
then this animation are start.
Let’s go, for Example.
HTML:<html>
<head>
<title>CSS3 Animation</title>
</head>
<body>
<div>
</div>
</body>
</html>
Copy this code
then copy css3 code....
div{
-webkit-animation:m 15s linear infinite;
-moz-animation:m 15s linear infinite;
-o-animation:m 15s linear infinite;
animation:m 15s linear infinite;
width:200px;
height:200px;
border: 1px solid #1397EA ;
border-radius:50%;
background: #1397ea;
}
@-webkit-keyframes m {
0% { -webkit-transform: scale(0.1) }
20% { -webkit-transform: scale(0.5)}
40% { -webkit-transform: scale(1)}
60% { -webkit-transform: scale(-1) }
80% { -webkit-transform: scale(-0.5)}
100% { -webkit-transform: scale(-0.1)}
}
@-moz-keyframes m {
0% { -moz-transform: scale(0.1) }
20% { -moz-transform: scale(0.5)}
40% { -moz-transform: scale(1)}
60% { -moz-transform: scale(-1) }
80% { -moz-transform: scale(-0.5)}
100% { -moz-transform: scale(-0.1)}
}
@keyframes m {
0% { transform: scale(0.1) }
20% { transform: scale(0.5)}
40% { transform: scale(1)}
60% { transform: scale(-1) }
80% { transform: scale(-0.5)}
100% { transform: scale(-0.1)}
}
Thank you.
CSS3 Scale Animatiom || CSS3 Tutorial
Reviewed by Golam Rabbani
on
December 06, 2018
Rating:
Reviewed by Golam Rabbani
on
December 06, 2018
Rating:
No comments: