Can you help me with this issue? / SOLVED

Question

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

Answer 1

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;
}

Answer 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 ;)

Answer 3

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