CODEWITHSUNDEEP
htmlcss
Justin
Justin

Reputation: 1059

How can I make this CSS animation smooth?

Instead of teetering in a jagged way I'd like it to interpolate between each rotation.

div {
  border: 1px solid red;
  width: 600px;
  height: 300px;

  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); }

}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div></div>

</body>
</html>

Preferably no JS but JS or jQuery is fine.

Upvotes: 2

Views: 2294

Answers (1)

Umutambyi Gad
Umutambyi Gad

Reputation: 4101

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

Upvotes: 2

Related Questions