How can I get my animation to work without affecting the surrounding elements? In this case, without moving the text around it.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
color: #131313;
font-family: sans-serif;
}
#content {
margin: 2em;
}
#test {
margin: 2em 2em 0.25em 2em;
display: flex;
flex-direction: row;
align-items: center;
}
#test > div:last-child {
margin: 0 2em;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.highlight {
color: #00FFFF;
}
.throb {
animation-name: throb;
animation-duration: 1500ms;
animation-iteration-count: infinite;
animation-timing-function: ease-in;
}
@keyframes throb {
0% {
width: 100px;
transform: rotate(0deg);
}
12.5% {
transform: rotate(45deg);
}
25% {
transform: rotate(90deg);
}
37.5% {
transform: rotate(135deg);
}
50% {
width: 105px;
transform: rotate(180deg);
}
62.5% {
transform: rotate(225deg);
}
75% {
transform: rotate(270deg);
}
87.5% {
transform: rotate(315deg);
}
100% {
width: 100px;
transform: rotate(360deg);
}
}
</style>
<title></title>
</head>
<body>
<div id="test">
<img src="wheel.png" width="100px" />
<div>
<div>the quick brown fox jumps over the lazy dog</div>
<div>THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG</div>
</div>
</div>
<script type="text/javascript">
const RECORD = document.querySelector('img');
RECORD.classList.add('throb');
</script>
</body>
</html>
3
Answers
it’s the width property in your animation that is affecting the layout.
to solve this keeping your animation key frames as is. wrap the image in a div give it the same width and height as the image and set
position: absoluteon the image.the absolute positioning detaches the element from the layout
Your animation changes the image width, causing the text to shift. I fixed this by wrapping the image in a div and making the div as big as the image gets in the animation (105px). I then centered the image in the div.
Hope this helps!
The shift occurs due to change in width during animation. You could achieve a similar effect using
transform:scaleand removingwidthproperty