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