CSS3 动画在颤抖

Question

I am currently building an interactive map, I have various animated elements that I am currently working through. I have noticed however, that the animations are jumping/shaking slightly whilst they are animating.

You can see my codepen here

Does anyone have any ideas why they are slightly shaking? I have checked all browsers, the shaking is minimal but still having an effect!

 @charset "UTF-8"; html, body { -webkit-text-size-adjust: 100%; margin: 0; padding: 0; height: 100%; width: 100%; } * { box-sizing: border-box; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; outline: 0; } img { max-width: 100%; height: auto; } .map-container { height: 100%; width: 100%; } .map { position: relative; height: 100%; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .desk-map { position: relative; overflow: hidden; } .animations>div { position: absolute; } .balloon-1 { width: 4.5%; height: 9%; background-image: url("https://www.ec-projects.co.uk/map/balloon-1.png"); background-repeat: no-repeat; left: 12%; top: 14%; z-index: 1; animation: balloon1 14s infinite linear; } @keyframes balloon1 { 0% { left: 12%; top: 14%; } 50% { left: 12%; top: 2.5%; } 20% { left: 12%; top: 14%; } } .balloon-2 { width: 4.5%; height: 9%; background-image: url("https://www.ec-projects.co.uk/map/balloon-2.png"); background-repeat: no-repeat; left: 6.5%; top: 21%; z-index: 1; animation: balloon2 14s infinite linear; animation-delay: 1s; } @keyframes balloon2 { 0% { left: 6.5%; top: 21%; } 50% { left: 6.5%; top: 15%; } 20% { left: 6.5%; top: 21%; } } .car-1 { width: 1.5%; height: 1.5%; background-image: url(https://www.ec-projects.co.uk/map/car-1.png); background-repeat: no-repeat; right: 22%; bottom: 32.25%; z-index: 1; animation: car1 30s infinite linear; animation-delay: 1s; -webkit-backface-visibility: hidden; } @keyframes car1 { 0% { right: 22%; bottom: 32.25%; } 100% { right: 57.25%; bottom: -0.4%; } }

 <div class="map-container"> <div class="map"> <div class="desk-map"> <img src="https://www.ec-projects.co.uk/map/map.png" /> <div class="animations"> <div class="balloon-1"></div> <div class="balloon-2"></div> <div class="car-1"></div> </div> </div> </div> </div>

Answer 1

This is because the distance to cover by balloon's and the time for animation is not in sync.

eg. you have to travel 100 km and you have 100 days to cover that distance, then your movement will be like slow moving ( stop and move ). If you have to cover 100 km and you have 10 min, then your movement will be like running ( fast ). You have to adjust those timings in the balloon movement.

You please replace the css with the updated css below and check

Also please check the snippet, adjust the animation time to see the effect. You can fix a duration which you think is smooth for your need.

 @charset "UTF-8"; html, body { -webkit-text-size-adjust: 100%; margin: 0; padding: 0; height: 100%; width: 100%; } * { box-sizing: border-box; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; outline: 0; } img { max-width: 100%; height: auto; } .map-container { height: 100%; width: 100%; } .map { position: relative; height: 100%; width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; } .desk-map { position: relative; overflow: hidden; /* background-image: url("background-image: uri('https://www.ec-projects.co.uk/map/map.png"); */ background-color: #cccccc; height: 100%; width: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .animations>div { position: absolute; } .balloon-1 { width: 100%; height: 100%; background-image: url("https://www.ec-projects.co.uk/map/balloon-1.png"); background-repeat: no-repeat; left: 20%; top: 5%; z-index: 1; backface-visibility: hidden; perspective: 1000; animation: balloon1 20s infinite linear; } @keyframes balloon1 { 0% { transform: translateY(100%); } 50% { transform: translateY(0) } 100% { transform: translateY(100%) } } .balloon-2 { width: 100%; height: 100%; background-image: url("https://www.ec-projects.co.uk/map/balloon-2.png"); background-repeat: no-repeat; left: 6.5%; top: 0; z-index: 1; backface-visibility: hidden; perspective: 1000; animation: balloon2 30s infinite linear; animation-delay: .5s; } @keyframes balloon2 { 0% { transform: translateY(100%) } 50% { transform: translateY(0) } 100% { transform: translateY(100%) } } .car-1 { width: 6%; height: 10%; background-image: url(https://www.ec-projects.co.uk/map/car-1.png); background-repeat: no-repeat; z-index: 1; animation: car1 10s infinite linear; animation-delay: 1s; -webkit-backface-visibility: hidden; } @keyframes car1 { 0% { right: 22%; bottom: 32.25%; } 100% { right: 57.25%; bottom: -0.4%; } }

 <div class="map-container"> <div class="map"> <div class="desk-map"> <img src="https://www.ec-projects.co.uk/map/map.png" /> <div class="animations"> <div class="balloon-1"></div> <div class="balloon-2"></div> <div class="car-1"></div> </div> </div> </div> </div>