+ 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 Réponses
+ 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 😀😀
Vous avez souvent des questions comme celle-ci ?
Apprenez de manière plus efficace, gratuitement :
Aujourd'hui en vedette
Ejercicio Pytho
0 Votes
What is that z for
0 Votes
Suggestions needed
4 Votes
Please rate my code from 1 to 10
1 Votes
How to start
0 Votes