Aishwarya R
Reputation: 657
How to make smooth animation in css?
I have used animation of translate(). The link to the code is here Bouncy animation
But it starts off abruptly at the bottom. How to give it a smooth start. Also notice the animation distorts in between. How to remove such error?
The code is below:
body{background: #92348A;
font-family:'Helvetica Neue',Arial, Helvetica, sans-serif;}
.wrapper{ margin-left:370px;
margin-top:195px;
position:absolute;
}
p{ font-family: "Comic Sans MS", cursive;
font-weight:900;
}
.one{width:50px;
height:50px;
float:left;
margin:0.5em;
position:relative;
border-radius:100%;
background: #F00;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.2s infinite ;
}
.two{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #9D1A76;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.38s infinite;}
.three{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #FF0080;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.3s infinite;}
.four{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #FF0;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.35s infinite;}
.five{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #0ECAF1;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.23s infinite;}
.six{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #0BF451;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.1s infinite;}
.seven{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #645CF1;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.14s infinite;}
@-webkit-keyframes bounce{
2%{ transform: translateY(120px);}
50%{ transform:translateY(-90px);}
100%{ transform:translateY(120px);}
}<body>
<div class="wrapper">
<div class="one">
<p>W</p>
</div>
<div class="two">
<p>E</p>
</div>
<div class="three">
<p>L</p>
</div>
<div class="four">
<p>C</p>
</div>
<div class="five">
<p>O</p>
</div>
<div class="six">
<p>M</p>
</div>
<div class="seven">
<p>E</p>
</div>
</div>
</body>Upvotes: 2
Views: 1185
Answers (3)
Nabaraj Devkota
Reputation: 11
body{background: #92348A;
font-family:'Helvetica Neue',Arial, Helvetica, sans-serif;}
.wrapper{ margin-left:370px;
margin-top:195px;
position:absolute;
}
p{ font-family: "Comic Sans MS", cursive;
font-weight:900;
}
.one{width:50px;
height:50px;
float:left;
margin:0.5em;
position:relative;
border-radius:100%;
background: #F00;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.2s infinite ;
}
.two{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #9D1A76;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.38s infinite;}
.three{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #FF0080;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.3s infinite;}
.four{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #FF0;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.35s infinite;}
.five{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #0ECAF1;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.23s infinite;}
.six{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #0BF451;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.1s infinite;}
.seven{width:50px;
height:50px;
float:left;
margin:1em;
position:relative;
border-radius:100%;
background: #645CF1;
text-align:center;
-webkit-animation:bounce 2s cubic-bezier(0.1,0.1,.3,1.9) 0.14s infinite;}
@-webkit-keyframes bounce{
2%{ transform: translateY(120px);}
50%{ transform:translateY(-90px);}
100%{ transform:translateY(120px);}
}<body>
<div class="wrapper">
<div class="one">
<p>W</p>
</div>
<div class="two">
<p>E</p>
</div>
<div class="three">
<p>L</p>
</div>
<div class="four">
<p>C</p>
</div>
<div class="five">
<p>O</p>
</div>
<div class="six">
<p>M</p>
</div>
<div class="seven">
<p>E</p>
</div>
</div>
</body>Upvotes: 1
Persijn
Reputation: 14990
@harcos answer is correct, but does not have a smooth start.
Add the transform:translateY(-90px);
to all the different animation classes for them to be rendered where the animation starts.
body {
background: #92348A;
font-family: 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.wrapper {
margin-left: 370px;
margin-top: 195px;
position: absolute;
}
p {
font-family: "Comic Sans MS", cursive;
font-weight: 900;
}
.one {
width: 50px;
height: 50px;
float: left;
margin: 0.5em;
position: relative;
border-radius: 100%;
background: #F00;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.2s infinite;
}
.two {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #9D1A76;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.38s infinite;
}
.three {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #FF0080;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.3s infinite;
}
.four {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #FF0;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.35s infinite;
}
.five {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #0ECAF1;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.23s infinite;
}
.six {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #0BF451;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.1s infinite;
}
.seven {
width: 50px;
height: 50px;
float: left;
margin: 1em;
position: relative;
border-radius: 100%;
background: #645CF1;
text-align: center;
transform:translateY(-90px);
-webkit-animation: bounce 2s cubic-bezier(0.1, 0.1, .3, 1.9) 0.14s infinite;
}
@-webkit-keyframes bounce{
0%{ transform:translateY(-90px);}
50%{ transform:translateY(120px);}
100%{ transform:translateY(-90px);}
}<body>
<div class="wrapper">
<div class="one">
<p>W</p>
</div>
<div class="two">
<p>E</p>
</div>
<div class="three">
<p>L</p>
</div>
<div class="four">
<p>C</p>
</div>
<div class="five">
<p>O</p>
</div>
<div class="six">
<p>M</p>
</div>
<div class="seven">
<p>E</p>
</div>
</div>
</body>Upvotes: 4
gabor.harsanyi
Reputation: 599
@-webkit-keyframes bounce{
0%{ transform:translateY(-90px);}
50%{ transform:translateY(120px);}
100%{ transform:translateY(-90px);}
}
Upvotes: 3
Related Questions
- How do I make this animation smoother in CSS?
- More smooth CSS animation
- How can I make this CSS animation smooth?
- Make Animations Smoother in HTML/CSS
- Smooth animations
- Smooth CSS3 animation
- How can I make this css animation smooth
- How to make animation smooth
- Smoother CSS animation
- Smooth frame moving animation in css