How to make an attractive animation with CSS?
So, here I have attached the code which we'll use in this tutorial.
CSS Code:
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
@keyframes bounce {
10%, 90% {
transform: translate3d(0, 5px, 0);
}
20%, 80% {
transform: translate3d(0, 3px, 0);
}
30%, 50%, 70% {
transform: translate3d(0, 7px, 0);
}
40%, 60% {
transform: translate3d(0, 2px, 0);
}
}
@keyframes circleanimation {
0%{
transform: scale(0.5);
opacity: 0;
}
60%{
transform: scale(1.4);
opacity: 1;
}
100%{
transform: scale(1);
}
}
@keyframes arrow {
0% { border-left: 4.5vw solid #0C6095;}
50% {border-left: 5.5vw solid #0C6095;}
100% {border-left: 4.5vw solid #0C6095;}
}
@keyframes arrow2 {
0% { border-left: 4.5vw solid #0C8199;}
50% {border-left: 5.5vw solid #0C8199;}
100% {border-left: 4.5vw solid #0C8199;}
}
body{
width: 100%;
margin-top: 5%;
background-color: #DCDCDC;
}
#shakesquare{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #0C6095;
animation: shake 1s;
transform: translate3d(0, 0, 0);
animation-iteration-count: infinite;
}
#shakesquare2{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #0C8199;
}
#shakesquare2:hover{
animation: shake 1s;
transform: translate3d(0, 0, 0);
}
#bouncesquare{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #0C6095;
animation: bounce 1s;
transform: translate3d(0, 0, 0);
animation-iteration-count: infinite;
}
#bouncesquare2{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: #0C8199;
}
#bouncesquare2:hover{
animation: bounce 1s;
transform: translate3d(0, 0, 0);
}
#circle{
margin: 0 auto;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #0C6095;
animation: circleanimation 1s;
animation-iteration-count: infinite;
}
#circle2{
margin: 0 auto;
width: 100px;
height: 100px;
border-radius: 100%;
background-color: #0C8199;
}
#circle2:hover{
animation: circleanimation 1s;
}
#arrow{
position: absolute;
content:"";
margin-left: 45%;
width: 0;
height: 0;
border-top: 4.35vw solid transparent;
border-left: 4.5vw solid #0C6095;
border-bottom: 4.35vw solid transparent;
animation: arrow 2s;
animation-iteration-count: infinite;
}
#arrow2{
position: absolute;
content:"";
margin-left: 45%;
width: 0;
height: 0;
border-top: 4.35vw solid transparent;
border-left: 4.5vw solid #0C8199;
border-bottom: 4.35vw solid transparent;
}
#arrow2:hover{
animation: arrow2 2s;
}
Here, in above code, as you see I have used four divisions for various animations.
So, First one is a shake effect with a smooth animation. And for that, I created 'shakesquare' named division in html. and make a shake animation by using '@keyframe shake' name in CSS. So, Now let's see what I did into the animation function.
@keyframes shake {
10%, 90% {
transform: translate3d(-1px, 0, 0);
}
20%, 80% {
transform: translate3d(2px, 0, 0);
}
30%, 50%, 70% {
transform: translate3d(-4px, 0, 0);
}
40%, 60% {
transform: translate3d(4px, 0, 0);
}
}
Above I have divided the whole process into different-different frame's time. So, after a load of the object, it will start the process like in 10% it'll move -1px to X-axis, then at 20% it'll move 2px to X-axis and so on. Mainly here we have to change the only X-axis for a shaking effect. and other two axes should be default one.
Now, the Second one is a Bounce effect with a smooth animation. And for that, I created 'Bouncesquare' name division in HTML. and make a bounce animation by using '@keyframe bounce' name in CSS. So, now let's see what I did into the animation function.
@keyframes bounce {
10%, 90% {
transform: translate3d(0, 5px, 0);
}
20%, 80% {
transform: translate3d(0, 3px, 0);
}
30%, 50%, 70% {
transform: translate3d(0, 7px, 0);
}
40%, 60% {
transform: translate3d(0, 2px, 0);
}
}
Above I have done same as the shake effect. But the main difference is, I did variations in Y-Axis instead of X-Axis also for bounce effect we have to put the value of X and Z axis should be default one.
Now, the Third one is a scaling effect with a smooth animation. And for that, I created 'Circle' name division in HTML. and make a scaling animation by using '@keyframes circleanimation' name in CSS. So, now let's see what I did into the animation function.
@keyframes circleanimation {
0%{
transform: scale(0.5);
opacity: 0;
}
60%{
transform: scale(1.4);
opacity: 1;
}
100%{
transform: scale(1);
}
}
So, Here same I have divide process into 3 divisions 0%, 60%, 100%. When object loads than at the initial stage object scale will be 0.5, at 60% scale will be increased to 1.4 and at 100% object scale will be 1. And this whole transition will be run smoothly because of the transform property.
The last one is a moving arrow effect, in this animation the arrow will move toward the left. And for that, I created 'arrow' name division in HTML. and make a scaling animation by using '@keyframe arrow' name in CSS. So, now let's see what I did into the animation function.
But first we have to know, How did I make arrow object with a CSS. So, for that as below, I have created an object with a border variations where the top and bottom one I transparent though left one is a colored. So, now here I have the code of arrow object so you understand it.
#arrow{
position: absolute;
content:"";
margin-left: 45%;
width: 0;
height: 0;
border-top: 4.35vw solid transparent;
border-left: 4.5vw solid #0C6095;
border-bottom: 4.35vw solid transparent;
}
After know how did I make an Arrow object let's see how we can make moving effect on it. So, below code is for the same.
@keyframes arrow {
0% { border-left: 4.5vw solid #0C6095;}
50% {border-left: 5.5vw solid #0C6095;}
100% {border-left: 4.5vw solid #0C6095;}
}
So, Here same I have divide process into 3 divisions 0%, 50%, 100%. When object loads than at the initial stage object's left border is a 4.5vw, at 50% left border will be 5.5vw and at the 100% left border will be 4.5vw as default.
Now we have all animations ready so let's know how we can use it for a particular object. So, for that default method is an:
animation: animation-name animation-time;
If we took the example of moving arrow and where the animation name is 'arrow' for moving the arrow. the example will be:
#arrow{
animation: arrow 2s;
animation-iteration-count: infinite;
}
Above we can I have put the animation-name as an arrow and time-duration as a 2s. so this object will run the 'arrow' animation for 2s. and for a set loop for it we have to give animation-iteration-count is an infinite.
This all was a simple animation which you can add to your webpage. And if you didn't get anything or find the problem for implement it. Comment me down below I'll be happy to solve your problems.
Comments
Post a Comment