0

Can you help me with this issue? / SOLVED

Hi, I'm new to programming and I tried "Checkbox hack" on one very simple example https://code.sololearn.com/WjGIccseX6SF/. First I did an android animation, that works perfectly, but when I want to do other animation, it just doesn't work. I was searching for mistakes which I did, but I can't find any. :/ It wouldn't let me sleep, thanks for any help :). Best regards, David

14th Feb 2017, 9:04 PM
David Toman
David Toman - avatar
3 ответов
+ 3
First, try with adding some vendors prefixed properties to your CSS, and say if it not help: /* Background color*/ body { background: -webkit-radial-gradient(black 15%, transparent 16%) 0 0, -webkit-radial-gradient(black 15%, transparent 16%) 8px 8px, -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color: #333; background-size:15px 15px; margin: 0; } .btns { width: 300px; height: 48px; margin: auto; background-color: rgba(255, 255, 255, 0.5); border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; box-shadow: 0px -2px 25px 1px #0cf400; } input[type=checkbox] { position: absolute; opacity: 0; /* why opacity, instead display:none; ??? display:none; */ } .material-icons { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-size: 48px; color: white; background-color: rgba(0, 0, 0, 0.3); padding: 0px 10px; border-radius: 10px; -webkit-transition: .3s; transition: .3s; } span { opacity: 0; position: relative; color: #0cf400; font-size: 17px; top: -43px; left: 40px; text-shadow: 1px 1px 1px black; } input[type=checkbox]:checked ~ label > .material-icons { color: #0cf400; -webkit-transform: translate(80px, 0px); transform: translate(80px, 0px); } input[type=checkbox]:checked ~ div div span { opacity: 1; }
15th Feb 2017, 8:44 AM
visph
visph - avatar
+ 2
With JS you encounter less cross-browsers compatibility problems for doing this kind of task ( animation -- but not none ) actually, but this tend to change with progressive better support of Css3... Anyway, specifications are continously mooving forward, and now there's a really good support in general for benefits of sensible advantages to handle this kind of task with Css when possible, eventually with providing JS fallback ;)
15th Feb 2017, 12:17 PM
visph
visph - avatar
0
Hey, thank you very much for response :). I've tried you suggestion, but it doesn't work. But after some changes and experiments it starts working. Because I don't know much JavaScript, I've used this :), in the future, I'll use JS instead. Thx for help
15th Feb 2017, 12:09 PM
David Toman
David Toman - avatar