Issue
I have the following markup:
<div class="container">
<div class="content">
...
<div class="no-animate">
...
</div>
</div>
</div>
So I want to apply a CSS animation to the .container
, but exclude the .no-animate
inside of it. Please note, the .no-animate
has the position: fixed
property, which is why I want to exclude it.
I have tried the following:
@keyframes my-animation {
12.5% {
transform: translateX(-0.5rem);
}
37.5% {
transform: translateX(0.5rem);
}
62.5% {
transform: translateX(-0.2rem);
}
87.5% {
transform: translateX(0.2rem);
}
}
.container {
animation: my-animation 0.5s;
animation-timing-function: linear;
}
.container .no-animate {
animation: none;
}
Unfortunately, this doesn't seem to have any effect, and the .no-animate
moves because of the animation. Any help is greatly appreciated.
Solution
Just apply the same transform values but in opposite direction to counter the effect of translate of parent container.
Something like this:
* {
margin: 0px;
padding: 0px;
}
body {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: auto auto;
height: 100vh;
}
.container {
height: 500px;
width: 600px;
background: black;
margin: 10px;
animation: move_box 1s linear infinite;
}
@keyframes move_box {
12.5% {
transform: translateX(-0.5rem);
}
37.5% {
transform: translateX(0.5rem);
}
62.5% {
transform: translateX(-0.2rem);
}
87.5% {
transform: translateX(0.2rem);
}
}
.box,
.box_without {
height: 100px;
width: 100px;
background: red;
animation: anti_move_box 1s linear infinite;
}
.box_without {
animation: none;
}
@keyframes anti_move_box {
12.5% {
transform: translateX(0.5rem);
}
37.5% {
transform: translateX(-0.5rem);
}
62.5% {
transform: translateX(0.2rem);
}
87.5% {
transform: translateX(-0.2rem);
}
}
<h1>Red box not moving alongside black box</h1>
<h1>Red box moving alongside black box</h1>
<div class="container">
<div class="box"></div>
</div>
<div class="container">
<div class="box_without"></div>
</div>
Answered By - Ac_mmi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.