How to Make The Animation Smooth

How to make the animation smooth?

You should change yout timing function:

animation-timing-function: linear;

You could also use a shortland:

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear .1s colorIt;

How can I make this CSS animation smooth?

you have to add the transition property and your CSS and thereafter it will looks like this

div {
  border: 1px solid red;
  width: 600px;
  height: 300px;
  transition: 1s ease-in-out all;
  animation: shake 0.75s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: rotate(0deg); }
 25% { transform: rotate(-4deg); }
 50% { transform: rotate(0deg); }
 75% { transform: rotate(4deg); }
100% { transform: rotate(0deg); }
}

if you found it hard to see changes reduce your animation time and increase the transition one

CSS: make hover animation smooth

To avoid overriding your transition property, you should merge them :

.zoom {    display: flex;    justify-content: center;}
.zoom .box{    padding: 16px;    transition: background-color .6s ease, transform .6s;}
.zoom .box:hover {    transform: scale(1.2);    background-color: #BD8A3B;}
.box {    width: 200px;    height: 600px;    background-color: #DACDBD;}

<section class="zoom">            <div class="box">                <span class="bold">Pwinw wjdnw wndi</span>                <span class="number">5,5 % - 6,6%</span>                <span class="light">dwjndwj dwjndw dw</span>                <span class="bold">wdjwndk wdniwd knj</span>            </div>        </section>

How can I make this css animation smooth

If you ask me, your starting point at 0% should begin with 0px, but that's just me:

.container {  text-align: center;  margin-top: 30px;}
.box {  background: rgba(0, 10, 103, 0.5);  height: 50px;  width: 50px;  border: 3px solid rgba(0, 10, 103, 0.9);  margin: 10px;  display: inline-block;  animation: updn 1s infinite ease-out;}
.box:nth-child(2) {  animation-delay: 1.2s;}
.box:nth-child(3) {  animation-delay: 1.4s;}
@keyframes updn {  0% {    transform: translateY(0px) translateX(0px);  }  50% {    transform: translateY(0px);  }  75% {    transform: translateY(10px);  }  100% {    transform: translateY(0px) translateX(0px);  }}

<div class="container">  <div class="box"></div>  <div class="box"></div>  <div class="box"></div></div>

How can I make my keyframe animation start over smoothly?

To fix the problem with the half-visible first item after the animation scrolls to the top, you should apply the same height to all items and properly vertically center the h3-tag. To make that easier, I've adjusted your html a little.

To smoothen the animation, you need to change your keyframes. First use a multiple of the height of your elements for the translateY. Then you have to change the percentages. By letting the transition start at 10% of the animation duration, your first item will be visible for a longer time after the animation restarts.

body {  font-family: 'Poppins', sans-serif;}
ul {  list-style: none;}
#flip {  height: 43px;  overflow: hidden;}
#flip .content {  height: 43px; /* new */  display: flex;  flex-direction: column;  align-items: center;  justify-content: center; /* new */}
#flip h3 {  font-weight: 400;  font-size: 0.5em;  color: white;  text-transform: uppercase;  padding: 5px;  animation: flip 6s infinite; /* changed */  animation-delay: 1s;}
#flip .one {  background: #CD1517;}
#flip .two {  background: #068587;}
#flip .three {  background: #F2B134;}
#flip .four {  background: #6B50BF;}
#flip .five {  background: #4FB99F;}

/* changed */@-webkit-keyframes flip {  10%, 100% {    transform: translateY(0px);  }  25% {    transform: translateY(-43px);  }  40% {    transform: translateY(-86px);  }  55% {    transform: translateY(-129px);  }  75% {    transform: translateY(-172px);  }}

<ul id="flip">  <li class="content">    <h3 class="one">developer</h3>  </li>  <li class="content">    <h3 class="two">designer</h3>  </li>  <li class="content">    <h3 class="three">programmer</h3>  </li>  <li class="content">    <h3 class="four">carodej</h3>  </li>  <li class="content">    <h3 class="five">alluneed</h3>  </li></ul>

How to make my infinite linear animation smooth?

It appears that background-size: 200% 200%; and background-position: 100% 0%; aren't playing nicely together. If you set background-position: 200% 0%; it runs smoothly.

By setting the animation to be twice as long we can make sure it still looks like its moving at the same rate.

@keyframes AnimationName {  0% {    background-position: 200% 0%  }  100% {    background-position: 0% 0%  }}
.myanimation {  width: 50px;  height: 150px;  background: repeating-linear-gradient(-45deg, #43ABC9, #43ABC9 7px, #369ebc 7px, #369ebc 14px);  animation: AnimationName 4s linear infinite;  background-size: 200% 200%;}

<div class="myanimation"></div>