Issue
i'm trying to perform an animation on the id="hello" element , the animation doesn't work on the right margin , but works perfectly on the left margin , any ideas please?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#hola {
width: 250px;
height: 250px;
background-color: red;
animation-name: hola;
animation-duration: 2s;
animation-fill-mode: forwards;}
#hello {
width: 250px;
height: 250px;
background-color: red;
animation-name: hello;
animation-duration: 2s;
animation-fill-mode: forwards;}
@keyframes hola {
from {
` margin-left: -250px;
}
to {
margin-left: 10px;
}}
@keyframes hello {
from {
margin-right: 10px;}
to {
margin-right: 1000px;}}
</style>
<title>Document</title>
</head>
<body>
<div>
<h1>My tranforming element</h1>
<div id="hola"><p>Hola</p></div>
<div id="hello"><p>Hello</p></div>
</div>
</body>
</html>
Solution
It doesn't work because you're adding margin-right on the right side of the box, and since the box is aligned to the left, it doesn't push the box to the side.
And margin-left works because the boxes are aligned to the left, so adding a negative value will pull them out of view.
The margin-right animation would work if the box was aligned to the right.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#hola {
width: 250px;
height: 250px;
background-color: red;
animation-name: hola;
animation-duration: 2s;
animation-fill-mode: forwards;
}
#hello {
width: 250px;
height: 250px;
background-color: red;
animation-name: hello;
animation-duration: 2s;
animation-fill-mode: forwards;
/* Second box is aligned to the right */
position: absolute;
right: 0px;
}
@keyframes hola {
from {
margin-left: -250px;
}
to {
margin-left: 10px;
}}
@keyframes hello {
from {
margin-right: -250px;}
to {
margin-right: 10px;}}
</style>
<title>Document</title>
</head>
<body>
<div>
<h1>My tranforming element</h1>
<div id="hola"><p>Hola</p></div>
<div id="hello"><p>Hello</p></div>
</div>
</body>
</html>Im not sure what kind of animation are you trying to accomplish tho.
Answered By - MrFrenzoid
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.