New course! Every coder should learn Generative AI!
Try a free lesson+ 2
When i want to make tow DIVs and animate them
When i want to make tow DIVs and animate them .. one of them work and other disappeared .. what's wrong !!!!!
7 Answers
+ 6
At your '.div' rules, for the animation name prefixed property, you set 'moham' instead 'animate' ^^
Process to debug: I've set a red background color to the '.header' element, and that let can see the '.div' was moving exactly as the '.header' ;)
+ 4
Yes: without seing your code, how could we try to tell "what's wrong"? :P
+ 1
Hi Mohammed, could you display some code to see what happen please?
0
@geoffrey i can't understand you .. do you want to see my code ?
0
i'll separate it <html>
<head></head>
<body>
<div class="header" > </div>
<section class="div"> </section>
<style>
body {
background-color: #2d2d2d
}
.header {
width: 5% ;
height: 5% ;
position: absolute ;
top: 0px;
left: 0px;
background-color: #ddde10 ;
border-radius: 5% ;
animation-name: moham;
animation-delay: 2s ;
animation-duration: 3s ;
-webkit-animation-name: moham;
-webkit-animation-delay: 2s ;
-webkit-animation-duration: 3s ;
}
@keyframes moham {
0% {
left: 0px ;
top: 0px ;
}
50% {
left: 10%;
top: 20%;
}
100% {
left: 30%;
top: 50% ;
}
}
@-webkit-keyframes moham {
0% {
left: 0px ;
top: 0px ;
}
50% {
left: 10%;
top: 20%;
}
100% {
left: 30%;
top: 50% ;
}
}
0
.div {
width: 5% ;
height: 5% ;
position: absolute ;
top: 90px;
left: 90px;
background-color: #ddde10 ;
border-radius: 50% ;
animation-name: animate;
animation-delay: 2s ;
animation-duration: 3s ;
-webkit-animation-name: moham;
-webkit-animation-delay: 2s ;
-webkit-animation-duration: 3s ;
}
@keyframes animate {
0% {
left: 90px ;
top: 90px ;
}
50% {
left: 70%;
top: 30%;
}
100% {
left: 60%;
top: 40% ;
}
}
@-webkit-keyframes animate {
0% {
left: 90px ;
top: 90px ;
}
50% {
left: 70%;
top: 30%;
}
100% {
left: 60%;
top: 40% ;
}
}
</style>
</body>
</html>
0
@visph thank you verrrrrrrry much 😀😀
Often have questions like this?
Learn more efficiently, for free:
Hot today
Help me plss
3 Votes
Android studio emulator
1 Votes
Return function
1 Votes
Can anyone guide me
0 Votes
Internal vs external JS
1 Votes
Wrong?
0 Votes
My question
0 Votes