How to make the animation play when the radio button is checked?-Twitter bootstrap

mvrikxix
May 2, 2018
128 views
2 votes
3 Answers

I tried to make a custom radio button which changes color and plays and animation when click upon. But I was just able to do that with hover, I tried to use the “input:checked” but it pretty much didn’t work

When I hover on the radio button an animation takes place, but I want the animation to take place when I click the radio button. Please help me out with this!!

body{
    margin: 0;
    padding: 0;
}
.choose{
    margin: 0;
    padding: 0;
    position: relative;
    top: 0px;
    display: block;
    background: #262626;
    height: 209px;
}

.choose input{
    -webkit-appearance: none;
}

.choose #female{
    position: absolute;
    left: 65%;
}

.choose #male, #female{
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%,-50%);
    background: #ffffff;
    width: 70px;
    height: 70px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: .5s;
    font-size: 24px;
    color: #262626;
}

.choose #male:hover{
    background: #3c81de;
    color: white;
}

.choose #female:hover{
    background: #f23895;
    color: white;
}

.choose #male .fas{
    display: block;
    line-height: 70px;
    border-radius: 50%;
}

.choose #female .fas{
    display: block;
    line-height: 70px;
    border-radius: 50%;
}

.choose #male .fas:hover{
    animation: manimate 7s;
}

@keyframes manimate{
    0%{
        box-shadow: 0 0 0 0 rgb(90, 168, 217)
    }
    12%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
    80%{
        box-shadow: 0 0 0 0px rgba(255,109,74,0)
    }
    100%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
}

.choose #female .fas:hover{
    animation: fanimate 7s;
}

@keyframes fanimate{
    0%{
        box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
    }
    12%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
    80%{
        box-shadow: 0 0 0 0px rgba(255,109,74,0)
    }
    100%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>mvrikxix's Arena</title>
    <link rel="stylesheet" href="PlaywithButtons.css">
    <link rel="icon" href="mvrikxix.png">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>
<body>
    <div class="choose">
        <label>
            <input type="radio"><span id="male")><i class="fas fa-mars"></i></span></input>
            <input type="radio"><span id="female"><i class="fas fa-venus"></i></span></input>
        </label>
    </div>    
</body>    
</html>

Answers

It may have been an issue with the selector you were trying. This should work:

.choose input:checked + #male .fas {
  ...
}

body {
  margin: 0;
  padding: 0;
}

.choose {
  margin: 0;
  padding: 0;
  position: relative;
  top: 0px;
  display: block;
  background: #262626;
  height: 209px;
}

.choose input {
  -webkit-appearance: none;
}

.choose #female {
  position: absolute;
  left: 65%;
}

.choose #male,
#female {
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  width: 70px;
  height: 70px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: .5s;
  font-size: 24px;
  color: #262626;
}

.choose #male:hover {
  background: #3c81de;
  color: white;
}

.choose #female:hover {
  background: #f23895;
  color: white;
}

.choose #male .fas {
  display: block;
  line-height: 70px;
  border-radius: 50%;
}

.choose #female .fas {
  display: block;
  line-height: 70px;
  border-radius: 50%;
}

.choose #male .fas:hover {
  animation: manimate 7s;
}



@keyframes manimate {
  0% {
    box-shadow: 0 0 0 0 rgb(90, 168, 217)
  }
  12% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
  80% {
    box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
  }
  100% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
}

.choose #female .fas:hover {
  animation: fanimate 7s;
}

@keyframes fanimate {
  0% {
    box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
  }
  12% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
  80% {
    box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
  }
  100% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
}

.choose input:checked + #male .fas {
  animation: manimate 7s;
}

.choose input:checked + #female .fas {
  animation: fanimate 7s;
}

<!DOCTYPE html>
<html>

<head>
  <title>mvrikxix's Arena</title>
  <link rel="stylesheet" href="PlaywithButtons.css">
  <link rel="icon" href="mvrikxix.png">
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
  <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>

<body>
  <div class="choose">
    <label>
            <input type="radio"><span id="male"><i class="fas fa-mars"></i></span>
            <input type="radio"><span id="female"><i class="fas fa-venus"></i></span>
        </label>
  </div>
</body>

</html>

In order to use :checked, you’ll need to stay aware of the HTML structure.

For example, it seems that you want to style the <span> elements directly following <input> elements. The adjacent sibling or general sibling combinator can be useful for that.

I’ve also wrapped each input in its own label to keep them independent.

body {
  margin: 0;
  padding: 0;
}

.choose {
  background: #262626;
  display: flex;
  justify-content: space-around;
  padding: 5% 0;
}

.choose input {
  display: none;
}

#male span,
#female span {
  display: block;
  background: #ffffff;
  width: 70px;
  height: 70px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  transition: .5s;
  font-size: 24px;
  color: #262626;
}

#male input:checked+span {
  background: #3c81de;
  color: white;
}

#female input:checked+span {
  background: #f23895;
  color: white;
}

.choose .fas {
  display: block;
  line-height: 70px;
  border-radius: 50%;
}

#male input:checked+span .fas {
  animation: manimate 7s;
}

@keyframes manimate {
  0% {
    box-shadow: 0 0 0 0 rgb(90, 168, 217)
  }
  12% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
  80% {
    box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
  }
  100% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
}

#female input:checked+span .fas {
  animation: fanimate 7s;
}

@keyframes fanimate {
  0% {
    box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
  }
  12% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
  80% {
    box-shadow: 0 0 0 0px rgba(255, 109, 74, 0)
  }
  100% {
    box-shadow: 0 0 0 50px rgba(255, 109, 74, 0)
  }
}

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">


<div class="choose">
  <label id="male">
    <input name="gender" type="radio">
    <span><i class="fas fa-mars"></i></span>
  </label>
  <label id="female">
    <input name="gender" type="radio">
    <span><i class="fas fa-venus"></i></span>
  </label>
</div>

I guess your approach was totally fine. This also answers your question (have a look at the code below).
This code will trigger only once after selecting one of the two types. But this will trigger the animation on the radio button itself and not on the icon. If you inspect your code in the browser with some dev tools, you will notice that your radiobuttons have a size of 0x0 and they’re placed in the very top left corner. So even if you trigger your animation. It will will be in the wrong place.
Either place the radiobuttons right behind the icons and make them the same size or create a trigger on the icon itself.

body{
    margin: 0;
    padding: 0;
}
.choose{
    margin: 0;
    padding: 0;
    position: relative;
    top: 0px;
    display: block;
    background: #262626;
    height: 209px;
}

.choose input{
    -webkit-appearance: none;
}

.choose #female{
    position: absolute;
    left: 65%;
}

.choose #male, #female{
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%,-50%);
    background: #ffffff;
    width: 70px;
    height: 70px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: .5s;
    font-size: 24px;
    color: #262626;
}

.choose #male:hover{
    background: #3c81de;
    color: white;
}

.choose #female:hover{
    background: #f23895;
    color: white;
}

.choose #male .fas{
    display: block;
    line-height: 70px;
    border-radius: 50%;
}

.choose #female .fas{
    display: block;
    line-height: 70px;
    border-radius: 50%;
}

.choose #male .fas:hover{
    animation: manimate 7s;
}

@keyframes manimate{
    0%{
        box-shadow: 0 0 0 0 rgb(90, 168, 217)
    }
    12%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
    80%{
        box-shadow: 0 0 0 0px rgba(255,109,74,0)
    }
    100%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
}

.choose #female .fas:hover{
    animation: fanimate 7s;
}

input[type="radio"]:checked{
    animation: fanimate 7s;
}

@keyframes fanimate{
    0%{
        box-shadow: 0 0 0 0 rgba(237, 110, 173, 0.98)
    }
    12%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
    80%{
        box-shadow: 0 0 0 0px rgba(255,109,74,0)
    }
    100%{
        box-shadow: 0 0 0 50px rgba(255,109,74,0)
    }
}

<!DOCTYPE html>
<html>
<head>
    <title>mvrikxix's Arena</title>
    <link rel="stylesheet" href="PlaywithButtons.css">
    <link rel="icon" href="mvrikxix.png">
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
    <link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet">
</head>
<body>
    <div class="choose">
        <label>
            <input type="radio"><span id="male")><i class="fas fa-mars"></i></span></input>
            <input type="radio"><span id="female"><i class="fas fa-venus"></i></span></input>
        </label>
    </div>    
</body>    
</html>

Please signup or login to give your own answer.

Click here to cancel reply.