Added 2 new effects and bower.json

This commit is contained in:
Ian Lunn 2014-01-28 11:39:56 +00:00
parent ecfcf504aa
commit b8441961e3
7 changed files with 62 additions and 34 deletions

28
bower.json Normal file
View File

@ -0,0 +1,28 @@
{
"name": "Hover.css",
"version": "1.0.6",
"homepage": "http://ianlunn.github.io/Hover",
"authors": [
"Ian Lunn <hello@ianlunn.co.uk>"
],
"description": "A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.",
"main": "hover.css",
"keywords": [
"Hover",
"hover",
"Hover Effects",
"CSS Effects",
"CSS3 Effects",
"CSS Hover Effects",
"CSS3 Hover Effects"
],
"license": "MIT",
"private": false,
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}

4
css/hover-min.css vendored

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
/*!
* Hover.css (http://ianlunn.co.uk/)
* Version: 1.0.5
* Version: 1.0.6
* Author: Ian Lunn @IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover
@ -727,9 +727,9 @@
animation-iteration-count: 1;
}
/* Wobble Top Left Bottom Right */
/* Wobble To Bottom Right */
@-webkit-keyframes wobble-top-left-bottom-right {
@-webkit-keyframes wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
transform: translate(8px, 8px);
@ -761,7 +761,7 @@
}
}
@keyframes wobble-top-left-bottom-right {
@keyframes wobble-to-bottom-right {
16.65% {
-webkit-transform: translate(8px, 8px);
-ms-transform: translate(8px, 8px);
@ -799,7 +799,7 @@
}
}
.wobble-top-left-bottom-right {
.wobble-to-bottom-right {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
@ -807,9 +807,9 @@
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-top-left-bottom-right:hover {
-webkit-animation-name: wobble-top-left-bottom-right;
animation-name: wobble-top-left-bottom-right;
.wobble-to-bottom-right:hover {
-webkit-animation-name: wobble-to-bottom-right;
animation-name: wobble-to-bottom-right;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;
@ -818,9 +818,9 @@
animation-iteration-count: 1;
}
/* Wobble Bottom Left Top Right */
/* Wobble To Top Right */
@-webkit-keyframes wobble-bottom-left-top-right {
@-webkit-keyframes wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
transform: translate(8px, -8px);
@ -852,7 +852,7 @@
}
}
@keyframes wobble-bottom-left-top-right {
@keyframes wobble-to-top-right {
16.65% {
-webkit-transform: translate(8px, -8px);
-ms-transform: translate(8px, -8px);
@ -890,7 +890,7 @@
}
}
.wobble-bottom-left-top-right {
.wobble-to-top-right {
display: inline-block;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
@ -898,9 +898,9 @@
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-bottom-left-top-right:hover {
-webkit-animation-name: wobble-bottom-left-top-right;
animation-name: wobble-bottom-left-top-right;
.wobble-to-top-right:hover {
-webkit-animation-name: wobble-to-top-right;
animation-name: wobble-to-top-right;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-timing-function: ease-in-out;

View File

@ -43,8 +43,8 @@
<a rel="skew-backward" class="button skew-backward">Skew Backward</a>
<a rel="wobble-horizontal" class="button wobble-horizontal">Wobble Horizontal</a>
<a rel="wobble-vertical" class="button wobble-vertical">Wobble Vertical</a>
<a rel="wobble-top-left-bottom-right" class="button wobble-top-left-bottom-right">Wobble Top Left Bottom Right</a>
<a rel="wobble-bottom-left-top-right" class="button wobble-bottom-left-top-right">Wobble Bottom Left Top Right</a>
<a rel="wobble-to-bottom-right" class="button wobble-to-bottom-right">Wobble To Bottom Right</a>
<a rel="wobble-to-top-right" class="button wobble-to-top-right">Wobble To Top Right</a>
<a rel="wobble-top" class="button wobble-top">Wobble Top</a>
<a rel="wobble-bottom" class="button wobble-bottom">Wobble Bottom</a>
<a rel="wobble-skew" class="button wobble-skew">Wobble Skew</a>

View File

@ -1,5 +1,5 @@
/* Wobble Top Left Bottom Right */
@keyframes wobble-top-left-bottom-right {
/* Wobble To Bottom Right */
@keyframes wobble-to-bottom-right {
16.65% {
transform: translate(8px, 8px);
}
@ -25,13 +25,13 @@
}
}
@mixin wobble-top-left-bottom-right {
@mixin wobble-to-bottom-right {
display: inline-block;
@include hacks();
&:hover {
animation-name: wobble-top-left-bottom-right;
animation-name: wobble-to-bottom-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;

View File

@ -1,5 +1,5 @@
/* Wobble Bottom Left Top Right */
@keyframes wobble-bottom-left-top-right {
/* Wobble To Top Right */
@keyframes wobble-to-top-right {
16.65% {
transform: translate(8px, -8px);
}
@ -25,13 +25,13 @@
}
}
@mixin wobble-bottom-left-top-right {
@mixin wobble-to-top-right {
display: inline-block;
@include hacks();
&:hover {
animation-name: wobble-bottom-left-top-right;
animation-name: wobble-to-top-right;
animation-duration: 1s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;

View File

@ -1,6 +1,6 @@
/*!
* Hover.css (http://ianlunn.co.uk/)
* Version: 1.0.5
* Version: 1.0.6
* Author: Ian Lunn @IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover
@ -115,14 +115,14 @@
@include wobble-horizontal();
}
@import "effects/wobble-top-left-bottom-right";
.wobble-top-left-bottom-right {
@include wobble-top-left-bottom-right();
@import "effects/wobble-to-bottom-right";
.wobble-to-bottom-right {
@include wobble-to-bottom-right();
}
@import "effects/wobble-bottom-left-top-right";
.wobble-bottom-left-top-right {
@include wobble-bottom-left-top-right();
@import "effects/wobble-to-top-right";
.wobble-to-top-right {
@include wobble-to-top-right();
}
@import "effects/wobble-top";