"image hover and animate css"
Bootstrap 3.0.0 Snippet by karimsharf12252

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section> <div class="container"> <div class="row"> <div class="col-xs-12"> <h2>Buttons</h2> <p>These animations can be used as continous animations or as hover effects. For the purposes of this demo I have set them to be continous animations.</p> <h3>Transition Effects</h3> <div class="btns"> <button class="btn fade-in">Fade</button> <button class="btn grow">Grow</button> <button class="btn shrink">Shrink</button> <button class="btn tilt">Tilt</button> <button class="btn shake">Shake</button> <button class="btn bounce">Bounce</button> <button class="btn slide-width">Slide Width</button> </div> <h3>Background Effects</h3> <div class="btns"> <button class="btn fade-bg">Fade</button> <button class="btn slide left">Slide Left</button> <button class="btn slide right">Slide Right</button> <button class="btn slide top">Slide Top</button> <button class="btn slide bottom">Slide Bottom</button> </div> </div> </div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-xs-12"> <h2>Images</h2> <p>Some neat hover effects for images or galleries.</p> <div class="row"> <div class="col-xs-12 col-sm-4 img-hvr hvr-1"> <img src="http://pre13.deviantart.net/b51d/th/pre/i/2013/275/8/f/hands_up_by_jesusbuddy7-d6ozyw1.jpg"> <div class="text"> <h4>hello</h4> <p>is it me you're looking for?</p> </div> </div> <div class="col-xs-12 col-sm-4 img-hvr hvr-2"> <img src="http://pre12.deviantart.net/ceff/th/pre/i/2015/090/8/3/hostas_by_jesusbuddy7-d6bpprv.jpg"> <div class="text"> <h4>hello</h4> <p>is it me you're looking for?</p> </div> </div> <div class="col-xs-12 col-sm-4 img-hvr hvr-3"> <img src="http://pre08.deviantart.net/1feb/th/pre/i/2015/090/2/6/daisysmiles_by_jesusbuddy7-d219ssg.jpg"> <div class="text"> <h4>hello</h4> <p>is it me you're looking for?</p> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-4 img-hvr hvr-4"> <img src="http://img03.deviantart.net/2287/i/2013/129/e/c/dandy_lion_by_jesusbuddy7-d64pdlh.jpg"> <div class="text"> <h4>hello</h4> <p>is it me you're looking for?</p> </div> </div> <div class="col-xs-12 col-sm-4 img-hvr hvr-5"> <img src="http://pre15.deviantart.net/dbfc/th/pre/i/2013/275/7/b/jonsi_2_by_jesusbuddy7-d6ozz7v.jpg"> <div class="text"> <h4>hello</h4> <p>is it me you're looking for?</p> </div> </div> <div class="col-xs-12 col-sm-4 img-hvr hvr-6"> <img src="http://pre09.deviantart.net/05e0/th/pre/i/2013/196/6/7/hollyhocks_by_jesusbuddy7-d6dntpq.jpg"> <div class="text"> <h4>hello</h4> <p>is it me you're looking for?</p> </div> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-4 img-hvr hvr-7"> <img src="http://pre04.deviantart.net/efe8/th/pre/i/2012/198/a/6/orange_lily_by_jesusbuddy7-d57my9j.jpg"> </div> <div class="col-xs-12 col-sm-4 img-hvr hvr-8"> <img src="http://pre03.deviantart.net/4941/th/pre/i/2012/198/8/e/lichen_by_jesusbuddy7-d57n1p7.jpg"> <div class="text"> <h4>hello</h4> <p>is it me you're looking for?</p> </div> </div> <div class="col-xs-12 col-sm-4 img-hvr hvr-9"> <img src="http://pre09.deviantart.net/7c95/th/pre/i/2012/290/2/9/mum__s_the_word_by_jesusbuddy7-d5i547q.jpg"> </div> </div> <div class="row"> <div class="col-xs-12 col-sm-4 img-hvr hvr-10"> <div class="inner"> <div class="text"> <h4>hello</h4> <p>is it me you're looking for?</p> </div> </div> <img src="http://img01.deviantart.net/0543/i/2013/299/f/f/butterfly_house_1_by_jesusbuddy7-d6ryerf.jpg"> </div> <div class="col-xs-12 col-sm-4 img-hvr hvr-11"> <div class="inner"> <div class="text"> <h4>hello</h4> <p>is it me you're looking for?</p> </div> </div> <img src="http://img01.deviantart.net/4170/i/2010/156/1/8/the_conservatory__2_by_jesusbuddy7.jpg"> </div> <div class="col-xs-12 col-sm-4 img-hvr hvr-12"> <img src="http://img13.deviantart.net/88ad/i/2010/156/9/3/white_tiger_naps_by_jesusbuddy7.jpg"> </div> </div> </div> </div> </div> </section> <section class="footer"> <div class="container"> <div class="row"> <div class="col-xs-12"> <p class="small">Updated 11-7-2016. </p> </div> </div> </div> </section>
img { max-width: 100%; } section { padding: 30px 0; } section .row + .row { margin-top: 30px; } /*BUTTONS*/ .btns .btn { padding: 10px 15px; background: #ccc; color: #000; border: none; } .btns .btn + .btn { margin-left: 20px; } .btns .btn.fade-in { -webkit-animation: fade 3s linear 0s infinite alternate; -moz-animation: fade 3s linear 0s infinite alternate; -ms-animation: fade 3s linear 0s infinite alternate; -o-animation: fade 3s linear 0s infinite alternate; animation: fade 3s linear 0s infinite alternate; } .btns .btn.grow { -webkit-animation: grow 1s linear 0s infinite alternate; -moz-animation: grow 1s linear 0s infinite alternate; -ms-animation: grow 1s linear 0s infinite alternate; -o-animation: grow 1s linear 0s infinite alternate; animation: grow 1s linear 0s infinite alternate; } .btns .btn.shrink { -webkit-animation: shrink 1s linear 0s infinite alternate; -moz-animation: shrink 1s linear 0s infinite alternate; -ms-animation: shrink 1s linear 0s infinite alternate; -o-animation: shrink 1s linear 0s infinite alternate; animation: shrink 1s linear 0s infinite alternate; } .btns .btn.tilt { -webkit-animation: tilt 1s linear 0s infinite alternate; -moz-animation: tilt 1s linear 0s infinite alternate; -ms-animation: tilt 1s linear 0s infinite alternate; -o-animation: tilt 1s linear 0s infinite alternate; animation: tilt 1s linear 0s infinite alternate; } .btns .btn.shake { -webkit-animation: shake 0.3s linear 0s infinite; -moz-animation: shake 0.3s linear 0s infinite; -ms-animation: shake 0.3s linear 0s infinite; -o-animation: shake 0.3s linear 0s infinite; animation: shake 0.3s linear 0s infinite; } .btns .btn.slide-width { overflow: hidden; -webkit-animation: slide-width 3s linear 0s infinite alternate; -moz-animation: slide-width 3s linear 0s infinite alternate; -ms-animation: slide-width 3s linear 0s infinite alternate; -o-animation: slide-width 3s linear 0s infinite alternate; animation: slide-width 3s linear 0s infinite alternate; } .btns .btn.bounce { position: relative; -webkit-animation: bounce 0.5s linear 0s infinite alternate; -moz-animation: bounce 0.5s linear 0s infinite alternate; -ms-animation: bounce 0.5s linear 0s infinite alternate; -o-animation: bounce 0.5s linear 0s infinite alternate; animation: bounce 0.5s linear 0s infinite alternate; } .btns .btn.fade-bg { -webkit-animation: fade-bg 1s linear 0s infinite alternate; -moz-animation: fade-bg 1s linear 0s infinite alternate; -ms-animation: fade-bg 1s linear 0s infinite alternate; -o-animation: fade-bg 1s linear 0s infinite alternate; animation: fade-bg 1s linear 0s infinite alternate; } .btns .btn.slide { position: relative; overflow: hidden; -moz-transform: translateZ(0px); -webkit-transform: translateZ(0px); transform: translateZ(0px); } .btns .btn.slide::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #F37736; z-index: -1; transform-origin: 0 50% 0; -webkit-animation: slide-bg 1s linear 0s infinite alternate; -moz-animation: slide-bg 1s linear 0s infinite alternate; -ms-animation: slide-bg 1s linear 0s infinite alternate; -o-animation: slide-bg 1s linear 0s infinite alternate; animation: slide-bg 1s linear 0s infinite alternate; } .btns .btn.slide.right::before { background: #FDF498; transform-origin: 100% 50% 0; } .btns .btn.slide.top::before { background: #7BC043; transform-origin: 50% 100% 0; -webkit-animation: slide-bgv 1s linear 0s infinite alternate; -moz-animation: slide-bgv 1s linear 0s infinite alternate; -ms-animation: slide-bgv 1s linear 0s infinite alternate; -o-animation: slide-bgv 1s linear 0s infinite alternate; animation: slide-bgv 1s linear 0s infinite alternate; } .btns .btn.slide.bottom::before { background: #0392CF; transform-origin: 50% 0 0; -webkit-animation: slide-bgv 1s linear 0s infinite alternate; -moz-animation: slide-bgv 1s linear 0s infinite alternate; -ms-animation: slide-bgv 1s linear 0s infinite alternate; -o-animation: slide-bgv 1s linear 0s infinite alternate; animation: slide-bgv 1s linear 0s infinite alternate; } /*IMAGES*/ .img-hvr { position: relative; overflow: hidden; } .img-hvr:hover { cursor: pointer; } .img-hvr .text { position: absolute; margin: 0 15px; padding: 15px; z-index: 1; bottom: 0; left: 0; } .img-hvr .text h4 { color: #fff; } .img-hvr .text p { color: #fff; } .img-hvr.hvr-1 .text p { opacity: 0; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .img-hvr.hvr-1:hover .text p { opacity: 1; } .img-hvr.hvr-2 .text { bottom: -3em; -moz-transition: bottom 0.3s linear; -o-transition: bottom 0.3s linear; -webkit-transition: bottom 0.3s linear; transition: bottom 0.3s linear; } .img-hvr.hvr-2:hover .text { bottom: 0; } .img-hvr.hvr-3 .text { background: transparent; mix-blend-mode: hard-light; right: 0; text-align: center; top: 0; opacity: 0; -moz-transition: background-color 0.3s linear 0s, opacity 0.3s linear 0s; -o-transition: background-color 0.3s linear 0s, opacity 0.3s linear 0s; -webkit-transition: background-color 0.3s linear, opacity 0.3s linear; -webkit-transition-delay: 0s, 0s; transition: background-color 0.3s linear 0s, opacity 0.3s linear 0s; } .img-hvr.hvr-3 .text h4 { font-size: 60px; font-weight: bold; margin-top: 22%; } .img-hvr.hvr-3:hover .text { opacity: 1; background: rgba(123, 192, 67, 0.5); } .img-hvr.hvr-4 .text { opacity: 0; right: 0; text-align: center; top: 0; background-color: #ee4035; *zoom: 1; filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFEE4035', endColorstr='#FF0392CF'); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlNDAzNSIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZjM3NzM2Ii8+PHN0b3Agb2Zmc2V0PSI0MCUiIHN0b3AtY29sb3I9IiNmZGY0OTgiLz48c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzdiYzA0MyIvPjxzdG9wIG9mZnNldD0iODAlIiBzdG9wLWNvbG9yPSIjMDM5MmNmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #ee4035), color-stop(20%, #f37736), color-stop(40%, #fdf498), color-stop(60%, #7bc043), color-stop(80%, #0392cf)); background-image: -moz-linear-gradient(left bottom, #ee4035 0%, #f37736 20%, #fdf498 40%, #7bc043 60%, #0392cf 80%); background-image: -webkit-linear-gradient(left bottom, #ee4035 0%, #f37736 20%, #fdf498 40%, #7bc043 60%, #0392cf 80%); background-image: linear-gradient(to right top, #ee4035 0%, #f37736 20%, #fdf498 40%, #7bc043 60%, #0392cf 80%); -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; -webkit-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .img-hvr.hvr-4 .text h4 { font-size: 60px; font-weight: bold; margin-top: 22%; mix-blend-mode: soft-light; color: #000; } .img-hvr.hvr-4 .text p { font-weight: bold; font-size: 16px; } .img-hvr.hvr-4:hover .text { opacity: 1; } .img-hvr.hvr-5 .text { right: 0; text-align: center; top: 0; } .img-hvr.hvr-5 .text h4 { font-size: 60px; font-weight: bold; -moz-transform: translate(0px, 100%); -ms-transform: translate(0px, 100%); -webkit-transform: translate(0px, 100%); transform: translate(0px, 100%); -moz-transition: -moz-transform 0.3s linear 0s; -o-transition: -o-transform 0.3s linear 0s; -webkit-transition: -webkit-transform 0.3s linear; -webkit-transition-delay: 0s; transition: transform 0.3s linear 0s; } .img-hvr.hvr-5 .text p { font-weight: bold; font-size: 16px; -moz-transform: translate(0px, 1000%); -ms-transform: translate(0px, 1000%); -webkit-transform: translate(0px, 1000%); transform: translate(0px, 1000%); -moz-transition: -moz-transform 0.3s linear 0s; -o-transition: -o-transform 0.3s linear 0s; -webkit-transition: -webkit-transform 0.3s linear; -webkit-transition-delay: 0s; transition: transform 0.3s linear 0s; } .img-hvr.hvr-5:hover .text h4 { -moz-transform: translate(0px, 25%); -ms-transform: translate(0px, 25%); -webkit-transform: translate(0px, 25%); transform: translate(0px, 25%); } .img-hvr.hvr-5:hover .text p { -moz-transform: translate(0px, 50%); -ms-transform: translate(0px, 50%); -webkit-transform: translate(0px, 50%); transform: translate(0px, 50%); } .img-hvr.hvr-6 .text { opacity: 0; right: 0; text-align: center; top: 100%; background-color: #7bc043; -moz-transition: opacity 0.3s linear 0s, top 0.3s linear; -o-transition: opacity 0.3s linear 0s, top 0.3s linear; -webkit-transition: opacity 0.3s linear, top 0.3s linear; -webkit-transition-delay: 0s, 0s; transition: opacity 0.3s linear 0s, top 0.3s linear; } .img-hvr.hvr-6 .text h4 { font-size: 60px; font-weight: bold; margin-top: 22%; mix-blend-mode: soft-light; color: #000; } .img-hvr.hvr-6 .text p { font-weight: bold; font-size: 16px; } .img-hvr.hvr-6:hover .text { opacity: 1; top: 0; } .img-hvr.hvr-7 img { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); -moz-transition: -moz-transform 0.3s linear; -o-transition: -o-transform 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear; transition: transform 0.3s linear; } .img-hvr.hvr-7:hover img { -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -webkit-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .img-hvr.hvr-8::before { position: absolute; width: 80%; height: 80%; top: 10%; left: 10%; border-top: 1px solid #fff; border-right: 1px solid #fff; content: ""; opacity: 0; z-index: 9; -moz-transition: opacity 1.2s linear; -o-transition: opacity 1.2s linear; -webkit-transition: opacity 1.2s linear; transition: opacity 1.2s linear; } .img-hvr.hvr-8::after { position: absolute; width: 80%; height: 80%; bottom: 10%; left: 10%; border-bottom: 1px solid #fff; border-left: 1px solid #fff; content: ""; opacity: 0; z-index: 9; -moz-transition: opacity 1.2s linear; -o-transition: opacity 1.2s linear; -webkit-transition: opacity 1.2s linear; transition: opacity 1.2s linear; } .img-hvr.hvr-8 img { -moz-transition: filter 1.2s linear; -o-transition: filter 1.2s linear; -webkit-transition: filter 1.2s linear; transition: filter 1.2s linear; filter: blur(0); } .img-hvr.hvr-8 .text { opacity: 0; padding: 35px; -moz-transition: opacity 1.2s linear; -o-transition: opacity 1.2s linear; -webkit-transition: opacity 1.2s linear; transition: opacity 1.2s linear; } .img-hvr.hvr-8:hover::before { opacity: 1; } .img-hvr.hvr-8:hover::after { opacity: 1; } .img-hvr.hvr-8:hover img { filter: blur(2px); } .img-hvr.hvr-8:hover .text { opacity: 1; } .img-hvr.hvr-9 img { -webkit-filter: grayscale(0%); filter: grayscale(0%); -moz-transition: filter 0.5s linear; -o-transition: filter 0.5s linear; -webkit-transition: filter 0.5s linear; transition: filter 0.5s linear; } .img-hvr.hvr-9:hover img { -webkit-filter: grayscale(80%); filter: grayscale(80%); } .img-hvr.hvr-10 .inner { position: absolute; height: 100%; width: 92.5%; overflow: hidden; } .img-hvr.hvr-10 .inner::before { position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; background: rgba(3, 146, 207, 0.4); content: ""; z-index: 1; -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); -moz-transition: -moz-transform 0.5s linear; -o-transition: -o-transform 0.5s linear; -webkit-transition: -webkit-transform 0.5s linear; transition: transform 0.5s linear; } .img-hvr.hvr-10 .text { opacity: 0; padding: 35px; -moz-transition: opacity 1.2s linear; -o-transition: opacity 1.2s linear; -webkit-transition: opacity 1.2s linear; transition: opacity 1.2s linear; } .img-hvr.hvr-10:hover .inner::before { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } .img-hvr.hvr-10:hover .text { opacity: 1; } .img-hvr.hvr-11 .inner { position: absolute; height: 100%; width: 92.5%; overflow: hidden; } .img-hvr.hvr-11 .inner::before { background: #cccccc; content: ""; height: 0%; position: absolute; transform: rotate(45deg); transform-origin: 100% 33% 0; transition: height 1s linear 0s; width: 200%; } .img-hvr.hvr-11 .text { opacity: 0; padding: 35px; -moz-transition: opacity 0.3s linear 0s; -o-transition: opacity 0.3s linear 0s; -webkit-transition: opacity 0.3s linear; -webkit-transition-delay: 0s; transition: opacity 0.3s linear 0s; } .img-hvr.hvr-11:hover .inner::before { height: 340%; } .img-hvr.hvr-11:hover .text { opacity: 1; -moz-transition: opacity 0.5s linear 0.6s; -o-transition: opacity 0.5s linear 0.6s; -webkit-transition: opacity 0.5s linear; -webkit-transition-delay: 0.6s; transition: opacity 0.5s linear 0.6s; } /*BUTTON ANIMATIONS*/ @-webkit-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-ms-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes grow { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } @-moz-keyframes grow { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } @-ms-keyframes grow { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } @-o-keyframes grow { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } @keyframes grow { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -moz-transform: scale(1.2, 1.2); -ms-transform: scale(1.2, 1.2); -webkit-transform: scale(1.2, 1.2); transform: scale(1.2, 1.2); } } @-webkit-keyframes shrink { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } } @-moz-keyframes shrink { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } } @-ms-keyframes shrink { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } } @-o-keyframes shrink { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } } @keyframes shrink { 0% { -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -webkit-transform: scale(1, 1); transform: scale(1, 1); } 100% { -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); } } @-webkit-keyframes tilt { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 100% { transform: rotate(10deg) translate3d(0, 0, 0); } } @-moz-keyframes tilt { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 100% { transform: rotate(10deg) translate3d(0, 0, 0); } } @-ms-keyframes tilt { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 100% { transform: rotate(10deg) translate3d(0, 0, 0); } } @-o-keyframes tilt { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 100% { transform: rotate(10deg) translate3d(0, 0, 0); } } @keyframes tilt { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 100% { transform: rotate(10deg) translate3d(0, 0, 0); } } @-webkit-keyframes shake { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 25% { transform: rotate(10deg) translate3d(0, 0, 0); } 50% { transform: rotate(0deg) translate3d(0, 0, 0); } 75% { transform: rotate(-10deg) translate3d(0, 0, 0); } 100% { transform: rotate(0deg) translate3d(0, 0, 0); } } @-moz-keyframes shake { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 25% { transform: rotate(10deg) translate3d(0, 0, 0); } 50% { transform: rotate(0deg) translate3d(0, 0, 0); } 75% { transform: rotate(-10deg) translate3d(0, 0, 0); } 100% { transform: rotate(0deg) translate3d(0, 0, 0); } } @-ms-keyframes shake { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 25% { transform: rotate(10deg) translate3d(0, 0, 0); } 50% { transform: rotate(0deg) translate3d(0, 0, 0); } 75% { transform: rotate(-10deg) translate3d(0, 0, 0); } 100% { transform: rotate(0deg) translate3d(0, 0, 0); } } @-o-keyframes shake { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 25% { transform: rotate(10deg) translate3d(0, 0, 0); } 50% { transform: rotate(0deg) translate3d(0, 0, 0); } 75% { transform: rotate(-10deg) translate3d(0, 0, 0); } 100% { transform: rotate(0deg) translate3d(0, 0, 0); } } @keyframes shake { 0% { transform: rotate(0deg) translate3d(0, 0, 0); } 25% { transform: rotate(10deg) translate3d(0, 0, 0); } 50% { transform: rotate(0deg) translate3d(0, 0, 0); } 75% { transform: rotate(-10deg) translate3d(0, 0, 0); } 100% { transform: rotate(0deg) translate3d(0, 0, 0); } } @-webkit-keyframes slide-width { 0% { width: 50px; } 100% { width: 100px; } } @-moz-keyframes slide-width { 0% { width: 50px; } 100% { width: 100px; } } @-ms-keyframes slide-width { 0% { width: 50px; } 100% { width: 100px; } } @-o-keyframes slide-width { 0% { width: 50px; } 100% { width: 100px; } } @keyframes slide-width { 0% { width: 50px; } 100% { width: 100px; } } @-webkit-keyframes bounce { 0% { bottom: 0; } 100% { bottom: 5px; } } @-moz-keyframes bounce { 0% { bottom: 0; } 100% { bottom: 5px; } } @-ms-keyframes bounce { 0% { bottom: 0; } 100% { bottom: 5px; } } @-o-keyframes bounce { 0% { bottom: 0; } 100% { bottom: 5px; } } @keyframes bounce { 0% { bottom: 0; } 100% { bottom: 5px; } } @-webkit-keyframes fade-bg { 0% { background: #ccc; } 100% { background: #EE4035; } } @-moz-keyframes fade-bg { 0% { background: #ccc; } 100% { background: #EE4035; } } @-ms-keyframes fade-bg { 0% { background: #ccc; } 100% { background: #EE4035; } } @-o-keyframes fade-bg { 0% { background: #ccc; } 100% { background: #EE4035; } } @keyframes fade-bg { 0% { background: #ccc; } 100% { background: #EE4035; } } @-webkit-keyframes slide-bg { 0% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } @-moz-keyframes slide-bg { 0% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } @-ms-keyframes slide-bg { 0% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } @-o-keyframes slide-bg { 0% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes slide-bg { 0% { -moz-transform: scaleX(0); -ms-transform: scaleX(0); -webkit-transform: scaleX(0); transform: scaleX(0); } 100% { -moz-transform: scaleX(1); -ms-transform: scaleX(1); -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes slide-bgv { 0% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @-moz-keyframes slide-bgv { 0% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @-ms-keyframes slide-bgv { 0% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @-o-keyframes slide-bgv { 0% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } } @keyframes slide-bgv { 0% { -moz-transform: scaleY(0); -ms-transform: scaleY(0); -webkit-transform: scaleY(0); transform: scaleY(0); } 100% { -moz-transform: scaleY(1); -ms-transform: scaleY(1); -webkit-transform: scaleY(1); transform: scaleY(1); } }

Related: See More


Questions / Comments: