+ 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 !!!!!

5th Mar 2017, 4:43 PM
Mohammed Tarek
Mohammed Tarek - avatar
7 odpowiedzi
+ 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' ;)
5th Mar 2017, 7:28 PM
visph
visph - avatar
+ 4
Yes: without seing your code, how could we try to tell "what's wrong"? :P
5th Mar 2017, 6:29 PM
visph
visph - avatar
+ 1
Hi Mohammed, could you display some code to see what happen please?
5th Mar 2017, 4:47 PM
Geoffrey L
Geoffrey L - avatar
0
@geoffrey i can't understand you .. do you want to see my code ?
5th Mar 2017, 6:12 PM
Mohammed Tarek
Mohammed Tarek - avatar
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% ; } }
5th Mar 2017, 6:58 PM
Mohammed Tarek
Mohammed Tarek - avatar
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>
5th Mar 2017, 6:58 PM
Mohammed Tarek
Mohammed Tarek - avatar
0
@visph thank you verrrrrrrry much 😀😀
5th Mar 2017, 7:51 PM
Mohammed Tarek
Mohammed Tarek - avatar