Home Code CSS CSS3 Hot

Code CSS3 Checkbox & Radio Input Animations

tác giả Võ Hữu Nhân
xuất bản
Demo



/*
 * checked.css
 * v1.0.0
 *
 * Tiny set of :checked pure CSS animations.
 * https://github.com/720kb/checked.css
 *
 * MIT license
 * Sat Sep 10 2016
 */
@-webkit-keyframes hey{50%{-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-filter:blur(20px);filter:blur(20px)}90%{-webkit-filter:blur(40px);filter:blur(40px)}100%{-webkit-transform:none;transform:none;-webkit-filter:none;filter:none}}@keyframes hey{50%{-webkit-transform:scale(1.5);transform:scale(1.5);-webkit-filter:blur(20px);filter:blur(20px)}90%{-webkit-filter:blur(40px);filter:blur(40px)}100%{-webkit-transform:none;transform:none;-webkit-filter:none;filter:none}}.checked-hey:checked{-webkit-animation:hey .8s linear;animation:hey .8s linear}@-webkit-keyframes omg{59%{-webkit-transform:translateY(-4px);transform:translateY(-4px)}60%{-webkit-transform:translateX(-8px) translateY(12px);transform:translateX(-8px) translateY(12px)}70%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:scale(.4);transform:scale(.4)}100%{-webkit-transform:none;transform:none}}@keyframes omg{59%{-webkit-transform:translateY(-4px);transform:translateY(-4px)}60%{-webkit-transform:translateX(-8px) translateY(12px);transform:translateX(-8px) translateY(12px)}70%{-webkit-transform:translateY(-8px);transform:translateY(-8px)}80%{-webkit-transform:translateX(8px);transform:translateX(8px)}90%{-webkit-transform:scale(.4);transform:scale(.4)}100%{-webkit-transform:none;transform:none}}.checked-omg:checked{-webkit-animation:omg .5s linear;animation:omg .5s linear}.checked-splash:active{-webkit-transform:scale(2);transform:scale(2);-webkit-transition:all .15s linear;transition:all .15s linear}.checked-roll:checked{-webkit-transform:rotateX(360deg);transform:rotateX(360deg);-webkit-transition:all .15s linear;transition:all .15s linear}.checked-rotate:checked{-webkit-transform:rotate(360deg);transform:rotate(360deg);-webkit-transition:all .2s linear;transition:all .2s linear}.checked-down{-webkit-transition:all .15s linear;transition:all .15s linear}.checked-up,.checked-yo{-webkit-transition:all .15s linear}.checked-down:checked{-webkit-transform:translateY(10px);transform:translateY(10px)}.checked-up{transition:all .15s linear}.checked-up:checked{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.checked-yo{transition:all .15s linear}.checked-yo:checked{-webkit-transform:rotate(-45deg) translateZ(0);transform:rotate(-45deg) translateZ(0)}@-webkit-keyframes inout{30%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(.3);transform:scale(.3)}90%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:none;transform:none}}@keyframes inout{30%{-webkit-transform:scale(1.3);transform:scale(1.3)}70%{-webkit-transform:scale(.3);transform:scale(.3)}90%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:none;transform:none}}.checked-inout:checked{-webkit-animation:inout .5s linear;animation:inout .5s linear}.checked-away{-webkit-transition:all .15s linear;transition:all .15s linear}.checked-away:checked{-webkit-transform:translateX(-10px);transform:translateX(-10px)}@-webkit-keyframes jump{50%{-webkit-transform:scale(.6) translateY(-10px);transform:scale(.6) translateY(-10px)}70%{-webkit-transform:scale(.8) translateY(-5px);transform:scale(.8) translateY(-5px)}90%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}100%{-webkit-transform:none;transform:none}}@keyframes jump{50%{-webkit-transform:scale(.6) translateY(-10px);transform:scale(.6) translateY(-10px)}70%{-webkit-transform:scale(.8) translateY(-5px);transform:scale(.8) translateY(-5px)}90%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}100%{-webkit-transform:none;transform:none}}.checked-jump:checked{-webkit-animation:jump .35s linear;animation:jump .35s linear}@-webkit-keyframes tv{50%{-webkit-transform:scale(.6) rotateY(100deg) skew(45deg);transform:scale(.6) rotateY(100deg) skew(45deg)}70%{-webkit-transform:scale(.8) rotateY(200deg) skew(70deg);transform:scale(.8) rotateY(200deg) skew(70deg)}90%{-webkit-transform:scale(1) rotateY(500deg) skew(20deg);transform:scale(1) rotateY(500deg) skew(20deg)}100%{-webkit-transform:none;transform:none}}@keyframes tv{50%{-webkit-transform:scale(.6) rotateY(100deg) skew(45deg);transform:scale(.6) rotateY(100deg) skew(45deg)}70%{-webkit-transform:scale(.8) rotateY(200deg) skew(70deg);transform:scale(.8) rotateY(200deg) skew(70deg)}90%{-webkit-transform:scale(1) rotateY(500deg) skew(20deg);transform:scale(1) rotateY(500deg) skew(20deg)}100%{-webkit-transform:none;transform:none}}.checked-tv:checked{-webkit-animation:tv .3s linear;animation:tv .3s linear}@-webkit-keyframes focus{0%{opacity:.4;-webkit-transform:scale(3);transform:scale(3)}10%{-webkit-transform:scale(2.5);transform:scale(2.5)}90%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:none;transform:none}}@keyframes focus{0%{opacity:.4;-webkit-transform:scale(3);transform:scale(3)}10%{-webkit-transform:scale(2.5);transform:scale(2.5)}90%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:none;transform:none}}.checked-focus:checked{-webkit-animation:focus .25s ease-out;animation:focus .25s ease-out}@-webkit-keyframes tremolo{0%{-webkit-transform:translateY(.5px) translateX(-.5px) scale(1) skewY(1deg) skewX(-1deg);transform:translateY(.5px) translateX(-.5px) scale(1) skewY(1deg) skewX(-1deg)}50%{-webkit-transform:translateX(0) translateY(0) scale(1.1) skewY(0) skewX(0);transform:translateX(0) translateY(0) scale(1.1) skewY(0) skewX(0)}90%{-webkit-transform:translateY(-.5px) translateX(.5px) scale(1) skewY(1deg) skewX(-1deg);transform:translateY(-.5px) translateX(.5px) scale(1) skewY(1deg) skewX(-1deg)}100%{-webkit-transform:none;transform:none}}@keyframes tremolo{0%{-webkit-transform:translateY(.5px) translateX(-.5px) scale(1) skewY(1deg) skewX(-1deg);transform:translateY(.5px) translateX(-.5px) scale(1) skewY(1deg) skewX(-1deg)}50%{-webkit-transform:translateX(0) translateY(0) scale(1.1) skewY(0) skewX(0);transform:translateX(0) translateY(0) scale(1.1) skewY(0) skewX(0)}90%{-webkit-transform:translateY(-.5px) translateX(.5px) scale(1) skewY(1deg) skewX(-1deg);transform:translateY(-.5px) translateX(.5px) scale(1) skewY(1deg) skewX(-1deg)}100%{-webkit-transform:none;transform:none}}.checked-tremolo:checked{-webkit-animation:tremolo 65ms linear;animation:tremolo 65ms linear;-webkit-animation-iteration-count:7;animation-iteration-count:7}@-webkit-keyframes boing{0%{-webkit-transform:translateY(3px) scaleY(.8);transform:translateY(3px) scaleY(.8)}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}90%{opacity:.5;-webkit-transform:translateY(2px) scaleY(1) scaleX(1.5);transform:translateY(2px) scaleY(1) scaleX(1.5)}100%{-webkit-transform:none;transform:none}}@keyframes boing{0%{-webkit-transform:translateY(3px) scaleY(.8);transform:translateY(3px) scaleY(.8)}50%{-webkit-transform:translateY(-5px);transform:translateY(-5px)}90%{opacity:.5;-webkit-transform:translateY(2px) scaleY(1) scaleX(1.5);transform:translateY(2px) scaleY(1) scaleX(1.5)}100%{-webkit-transform:none;transform:none}}.checked-boing:checked{-webkit-animation:boing .2s ease-in-out;animation:boing .2s ease-in-out;-webkit-animation-iteration-count:3;animation-iteration-count:3}@-webkit-keyframes scatman{0%{-webkit-transform:translateX(-20px);transform:translateX(-20px)}20%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}40%{-webkit-transform:translateX(-1px);transform:translateX(-1px)}60%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:none;transform:none}}@keyframes scatman{0%{-webkit-transform:translateX(-20px);transform:translateX(-20px)}20%{-webkit-transform:translateX(-2px);transform:translateX(-2px)}40%{-webkit-transform:translateX(-1px);transform:translateX(-1px)}60%{-webkit-transform:translateX(0);transform:translateX(0)}100%{-webkit-transform:none;transform:none}}.checked-scatman:checked{-webkit-animation:scatman .3s ease-in-out;animation:scatman .3s ease-in-out;-webkit-animation-iteration-count:2;animation-iteration-count:2}@-webkit-keyframes ufo{0%{-webkit-transform:scaleY(.8);transform:scaleY(.8)}60%{-webkit-transform:scaleY(1) scaleX(1.43) rotate(270deg);transform:scaleY(1) scaleX(1.43) rotate(270deg)}100%{-webkit-transform:none;transform:none}}@keyframes ufo{0%{-webkit-transform:scaleY(.8);transform:scaleY(.8)}60%{-webkit-transform:scaleY(1) scaleX(1.43) rotate(270deg);transform:scaleY(1) scaleX(1.43) rotate(270deg)}100%{-webkit-transform:none;transform:none}}.checked-ufo:checked{-webkit-animation:ufo .2s linear;animation:ufo .2s linear;-webkit-animation-iteration-count:4;animation-iteration-count:4}@-webkit-keyframes flash{0%,60%{-webkit-transform:scale(0);transform:scale(0)}30%{-webkit-transform:scale(.5);transform:scale(.5)}90%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:none;transform:none}}@keyframes flash{0%,60%{-webkit-transform:scale(0);transform:scale(0)}30%{-webkit-transform:scale(.5);transform:scale(.5)}90%{-webkit-transform:scale(1);transform:scale(1)}100%{-webkit-transform:none;transform:none}}.checked-flash:checked{-webkit-animation:flash .2s cubic-bezier(.03,.61,.17,.97);animation:flash .2s cubic-bezier(.03,.61,.17,.97);-webkit-animation-iteration-count:3;animation-iteration-count:3}@-webkit-keyframes return{0%{-webkit-transform:scale(.3) translateX(7px);transform:scale(.3) translateX(7px)}50%{-webkit-transform:scale(.8) rotate(270deg) translateY(-10px);transform:scale(.8) rotate(270deg) translateY(-10px)}90%{-webkit-transform:skewX(15deg) rotate(270deg);transform:skewX(15deg) rotate(270deg)}}@keyframes return{0%{-webkit-transform:scale(.3) translateX(7px);transform:scale(.3) translateX(7px)}50%{-webkit-transform:scale(.8) rotate(270deg) translateY(-10px);transform:scale(.8) rotate(270deg) translateY(-10px)}90%{-webkit-transform:skewX(15deg) rotate(270deg);transform:skewX(15deg) rotate(270deg)}}.checked-return:checked{-webkit-animation:return .25s cubic-bezier(.03,.61,.17,.97);animation:return .25s cubic-bezier(.03,.61,.17,.97);-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes boom{0%{opacity:.2;-webkit-transform:scale(2);transform:scale(2)}90%{opacity:.01;-webkit-transform:scale(6);transform:scale(6)}100%{-webkit-transform:none;transform:none}}@keyframes boom{0%{opacity:.2;-webkit-transform:scale(2);transform:scale(2)}90%{opacity:.01;-webkit-transform:scale(6);transform:scale(6)}100%{-webkit-transform:none;transform:none}}.checked-boom:checked{-webkit-animation:boom .2s ease-in;animation:boom .2s ease-in;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes vertigo{0%{-webkit-transform:scale(1) rotate(50deg);transform:scale(1) rotate(50deg)}30%{-webkit-transform:scale(.5) skewX(45deg) translateY(3px) translateX(-3px);transform:scale(.5) skewX(45deg) translateY(3px) translateX(-3px)}60%{-webkit-transform:scale(1.2) skewY(5deg) rotate(0);transform:scale(1.2) skewY(5deg) rotate(0)}90%{-webkit-transform:skew(-9deg,-9deg);transform:skew(-9deg,-9deg)}100%{-webkit-transform:none;transform:none}}@keyframes vertigo{0%{-webkit-transform:scale(1) rotate(50deg);transform:scale(1) rotate(50deg)}30%{-webkit-transform:scale(.5) skewX(45deg) translateY(3px) translateX(-3px);transform:scale(.5) skewX(45deg) translateY(3px) translateX(-3px)}60%{-webkit-transform:scale(1.2) skewY(5deg) rotate(0);transform:scale(1.2) skewY(5deg) rotate(0)}90%{-webkit-transform:skew(-9deg,-9deg);transform:skew(-9deg,-9deg)}100%{-webkit-transform:none;transform:none}}.checked-vertigo:checked{-webkit-animation:vertigo .2s ease-in;animation:vertigo .2s ease-in;-webkit-animation-iteration-count:5;animation-iteration-count:5}@-webkit-keyframes pump{0%,100%{-webkit-transform:rotate(15deg) skewX(10deg) skewY(-20deg);transform:rotate(15deg) skewX(10deg) skewY(-20deg)}50%{-webkit-transform:scale(.8);transform:scale(.8)}80%{-webkit-transform:rotate(15deg) skewX(10deg) skewY(-40deg);transform:rotate(15deg) skewX(10deg) skewY(-40deg)}}@keyframes pump{0%,100%{-webkit-transform:rotate(15deg) skewX(10deg) skewY(-20deg);transform:rotate(15deg) skewX(10deg) skewY(-20deg)}50%{-webkit-transform:scale(.8);transform:scale(.8)}80%{-webkit-transform:rotate(15deg) skewX(10deg) skewY(-40deg);transform:rotate(15deg) skewX(10deg) skewY(-40deg)}}@-webkit-keyframes pumpit{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:scale(.8);transform:scale(.8)}80%{-webkit-transform:rotate(-15deg) skewX(-10deg) skewY(40deg);transform:rotate(-15deg) skewX(-10deg) skewY(40deg)}100%{-webkit-transform:rotate(-15deg) skewX(-10deg) skewY(20deg);transform:rotate(-15deg) skewX(-10deg) skewY(20deg)}}@keyframes pumpit{0%{-webkit-transform:none;transform:none}50%{-webkit-transform:scale(.8);transform:scale(.8)}80%{-webkit-transform:rotate(-15deg) skewX(-10deg) skewY(40deg);transform:rotate(-15deg) skewX(-10deg) skewY(40deg)}100%{-webkit-transform:rotate(-15deg) skewX(-10deg) skewY(20deg);transform:rotate(-15deg) skewX(-10deg) skewY(20deg)}}.checked-pump:checked{-webkit-animation:pump .4s cubic-bezier(.03,.61,.17,.97),pumpit .4s .4s linear;animation:pump .4s cubic-bezier(.03,.61,.17,.97),pumpit .4s .4s linear;-webkit-animation-iteration-count:1;animation-iteration-count:1}@-webkit-keyframes hooray{0%{opacity:.1;-webkit-transform:scale(5);transform:scale(5)}60%{-webkit-transform:none;transform:none}}@keyframes hooray{0%{opacity:.1;-webkit-transform:scale(5);transform:scale(5)}60%{-webkit-transform:none;transform:none}}.checked-hooray:checked{-webkit-animation:hooray .2s ease-in;animation:hooray .2s ease-in;-webkit-animation-iteration-count:3;animation-iteration-count:3}@-webkit-keyframes wheel{0%{-webkit-transform:scale(1) rotate(50deg);transform:scale(1) rotate(50deg)}30%{-webkit-transform:scale(.9) skewX(9deg);transform:scale(.9) skewX(9deg)}60%{-webkit-transform:scale(1.1) skewY(9deg) rotate(270deg);transform:scale(1.1) skewY(9deg) rotate(270deg)}90%{-webkit-transform:skew(-9deg,-9deg);transform:skew(-9deg,-9deg)}100%{-webkit-transform:none;transform:none}}@keyframes wheel{0%{-webkit-transform:scale(1) rotate(50deg);transform:scale(1) rotate(50deg)}30%{-webkit-transform:scale(.9) skewX(9deg);transform:scale(.9) skewX(9deg)}60%{-webkit-transform:scale(1.1) skewY(9deg) rotate(270deg);transform:scale(1.1) skewY(9deg) rotate(270deg)}90%{-webkit-transform:skew(-9deg,-9deg);transform:skew(-9deg,-9deg)}100%{-webkit-transform:none;transform:none}}.checked-wheel:checked{-webkit-animation:wheel .1s cubic-bezier(.03,.61,.17,.97);animation:wheel .1s cubic-bezier(.03,.61,.17,.97);-webkit-animation-iteration-count:5;animation-iteration-count:5}.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}

  <div class="col-sm-offset-3 col-sm-3 mt50">
     <form>
       <label><input type="radio" name="x" class="checked-focus"> Focus</label>
       <br>
       <label><input type="radio" name="x" class="checked-tremolo"> Tremolo</label>
       </br>
       <label><input type="radio" name="x" class="checked-boing"> Boing</label>
       <br>
       <label><input type="radio" name="x" class="checked-scatman"> Scatman</label>
       </br>
       <label><input type="radio" name="x" class="checked-ufo"> Ufo</label>
       <br>
       <label><input type="radio" name="x" class="checked-flash"> Flash</label>
       </br>
       <label><input type="radio" name="x" class="checked-return"> Return</label>
       <br>
       <label><input type="radio" name="x" class="checked-boom"> Boom</label>
       </br>
       <label><input type="radio" name="x" class="checked-vertigo"> Vertigo</label>
       <br>
       <label><input type="radio" name="x" class="checked-pump"> Pump</label>
       </br>
       <label><input type="radio" name="x" class="checked-hooray"> Hooray</label>
       <br>
       <label><input type="radio" name="x" class="checked-wheel"> Wheel</label>
     </form>
    </div>
    <div class="col-sm-offset-1 col-sm-3 mt50">
       <form>
       <label><input type="checkbox" name="x" class="checked-focus"> Focus</label>
       <br>
       <label><input type="checkbox" name="x" class="checked-tremolo"> Tremolo</label>
       </br>
       <label><input type="checkbox" name="x" class="checked-boing"> Boing</label>
       <br>
       <label><input type="checkbox" name="x" class="checked-scatman"> Scatman</label>
       </br>
       <label><input type="checkbox" name="x" class="checked-ufo"> Ufo</label>
       <br>
       <label><input type="checkbox" name="x" class="checked-flash"> Flash</label>
       </br>
       <label><input type="checkbox" name="x" class="checked-return"> Return</label>
       <br>
       <label><input type="checkbox" name="x" class="checked-boom"> Boom</label>
       </br>
       <label><input type="checkbox" name="x" class="checked-vertigo"> Vertigo</label>
       <br>
       <label><input type="checkbox" name="x" class="checked-pump"> Pump</label>
       </br>
       <label><input type="checkbox" name="x" class="checked-hooray"> Hooray</label>
       <br>
       <label><input type="checkbox" name="x" class="checked-wheel"> Wheel</label>
     </form>
    </div>


Cuối cùng là đoạn JS:
<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
 <script>window.jQuery || document.write('<script src="js/jquery-2.1.1.min.js"><\/script>')</script>
 <script type="text/javascript">
  $(document).on('ready', function onReady() {
      var checkbox = $('#checkbox')
      , radio = $('#radio')
      , select = $('select')
      , radioLabel = $('#radio-label')
      , checkboxLabel = $('#checkbox-label')
      , timeout;

      radio.attr('checked', 'checked');
      checkbox.attr('checked', 'checked');
      checkbox.bind('click', function (e) {
          e.preventDefault();
      });
      select.change(function onChange(e,a,b) {
        var selected = select.find(':selected').text();
        clearTimeout(timeout);

        radio.attr('class', '');
        checkbox.attr('class', '');
        var timeout = setTimeout(function () {
          radioLabel.text(selected.toString());
          checkboxLabel.text(selected.toString());
          radio.attr('class', 'checked-' + selected.toString().toLowerCase());
          checkbox.attr('class','checked-' + selected.toString().toLowerCase());
         
        }, 650);
      });
    });
 </script>
BÀI VIẾT CÙNG CHUYÊN MỤC

Chúc mừng, bạn là người đầu tiên!

CÓ THỂ BẠN ĐANG TÌM