Smooth CSS Change Transitions

Smooth css change transitions

You could use transition with CSS:

body {
    background-color: black;
    transition:all 1s;
}

The Demo Fiddle

Smoother CSS transitions on element

You can create a list with keyframes by javascript and creates a new animation based on the list. In this way you will avoid setInterval and the browser will animate your element by himself.

If you want even more smoother movement you should use less random values and provide keyframe list with smother positions.

function getRandomInteger(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const range = 200;
const steps = 50;

const keyframes = Array.apply(null, Array(50)).map(() => {
  return {
    transform: `translate(${getRandomInteger(-range, range)}%, ${getRandomInteger(-range, range)}%)`
  };
});

document.querySelector('.dot').animate(keyframes, {
  duration: steps * 500, // 0.5 sec for keyframe
  direction: 'alternate',
  fill: 'both',
  iterations: Infinity
});

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  overflow: hidden;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #eee;
}

.dot {
  border-style: none;
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
  background-color: rgba( 0, 0, 0, 0.5);
}

<hr class='dot'>

how to make smooth css transition

See this Demo

<a href="#" class="linkhover">
    <span hover-title="LINK HOVER">LINK HOVER</span>
</a>

.linkhover {
    display: inline-block;
    overflow: hidden;
    perspective: 400px;
    -webkit-perspective: 400px;
    perspective-origin: 50% 50%;
    -webkit-perspective-origin: 50% 50%;
}
.linkhover span {
    display: block;
    position: relative;
    transition: all 500ms ease;
    -webkit-transition: all 500ms ease;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.linkhover:hover span {
    transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
    -webkit-transform: translate3d( 0px, 0px, -35px ) rotateX( 90deg );
}
.linkhover span:after {
    content: attr(hover-title);
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    color: white;
    background: red;
    transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;
    transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
    -webkit-transform: translate3d( 0px, 100%, 0px ) rotateX( -90deg );
}

Smooth CSS transition using media queries

you can use css transition to animate

transition: ease all .5s;

and to animate don't change the position try changing the values

#square {  height: 100px;  width: 100px;  background-color: red;  transition: ease all .5s;
}.position {  position: absolute;  bottom: 20px;  left: 300px;}@media only screen and (max-width: 600px) {  .position {    bottom: 20px;    left: 20px;  }}

<div id="square" class="position"></div>

---

Related Topics