mirror of https://github.com/IanLunn/Hover.git
Improve use of icons (de-couple from FontAwesome)
This commit is contained in:
IanLunn
parent
cb79116fbf
commit
a7b08adaa6
38
README.md
38
README.md
|
|
@ -13,7 +13,7 @@ A collection of CSS3 powered hover effects to be applied to links, buttons, logo
|
|||
- [A. Copy and Paste an Effect](#a-copy-and-paste-an-effect)
|
||||
- [B. Reference Hover.css](#b-reference-hovercss)
|
||||
- [A Note on the display property](#a-note-on-the-display-property)
|
||||
- [Using FontAwesome with Icon Effects](#using-fontawesome-with-icon-effects)
|
||||
- [Using Icon Effects](#using-icon-effects)
|
||||
- [What's Included?](#whats-included)
|
||||
- [css](#css)
|
||||
- [scss/less](#scssless)
|
||||
|
|
@ -126,24 +126,44 @@ Should you wish to override this behavior, either remove the above CSS from Hove
|
|||
|
||||
For more information about Transformable elements, see the [CSS Transforms Module](http://www.w3.org/TR/css3-transforms/#transformable-element).
|
||||
|
||||
### Using FontAwesome with Icon Effects
|
||||
### Using Icon Effects
|
||||
|
||||
Hover.css uses [FontAwesome](https://fortawesome.github.io/Font-Awesome/) for its icon effects. For these effects to work, a reference to the FontAwesome stylesheet must be added by placing the following in the `<head></head>` of your web page:
|
||||
To add a Hover.css icon, place the icon HTML inside the element that a Hover.css effect is applied to. For example:
|
||||
|
||||
```
|
||||
<a href="#" class="hvr-icon-forward">
|
||||
Icon Forward
|
||||
<i class="fa fa-chevron-circle-right hvr-icon"></i>
|
||||
</a>
|
||||
```
|
||||
|
||||
In the above code, we have given a link element a class of `hvr-icon-forward` which will make an icon move forward when the link is hovered over. The icon itself is given a class of `hvr-icon` to let Hover.css know that this is the icon we want to animate. In this example, our icon is from FontAwesome, which we've loaded into the `<head></head>` of our web page as per FontAwesome's instructions, like so:
|
||||
|
||||
```html
|
||||
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">
|
||||
```
|
||||
|
||||
Hover.css icons are added to elements via the classes .fa or .hover-icon:
|
||||
Note: As of Hover.css v2.3.0 you can use any method you like for adding icons (previously, only FontAwesome was supported out-of-the-box.) For example, you could use another icon library or instead, use an image like so:
|
||||
|
||||
```
|
||||
<a href="#" class="hvr-icon-spin"><i class="fa fa-refresh"></i> My Text</a>
|
||||
```
|
||||
OR
|
||||
```
|
||||
<a href="#" class="hvr-icon-spin"><span class="glyphicon glyphicon-search hover-icon"></span> My Text</a>
|
||||
<a href="#" class="hvr-icon-spin">
|
||||
Icon Spin
|
||||
<img src="myicon.svg" class="hvr-icon" />
|
||||
</a>
|
||||
```
|
||||
|
||||
Here, the image will act as the icon because it has the `hvr-icon` class applied to it, and when hovered over, the icon will spin as defined by the `hvr-icon-spin` class on the parent element.
|
||||
|
||||
Position of the icon is entirely in your control. You could place it before the text, like so:
|
||||
|
||||
```
|
||||
<a href="#" class="hvr-icon-spin">
|
||||
<img src="myicon.svg" class="hvr-icon" />
|
||||
Icon Spin
|
||||
</a>
|
||||
```
|
||||
|
||||
Or use custom CSS to position the icon as you see fit.
|
||||
|
||||
## What's Included?
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
193
css/hover.css
193
css/hover.css
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.2.2
|
||||
* Version: 2.3.0
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
|
@ -2858,11 +2858,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.1s;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
.hvr-icon-back .fa, .hvr-icon-back .hover-icon {
|
||||
.hvr-icon-back .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.1s;
|
||||
|
|
@ -2872,9 +2871,7 @@
|
|||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-back:hover .fa, .hvr-icon-back:hover .hover-icon,
|
||||
.hvr-icon-back:focus .fa, .hvr-icon-back:focus .hover-icon,
|
||||
.hvr-icon-back:active .fa, .hvr-icon-back:active .hover-icon {
|
||||
.hvr-icon-back:hover .hvr-icon, .hvr-icon-back:focus .hvr-icon, .hvr-icon-back:active .hvr-icon {
|
||||
-webkit-transform: translateX(-4px);
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
|
|
@ -2886,11 +2883,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.1s;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
.hvr-icon-forward .fa, .hvr-icon-forward .hover-icon {
|
||||
.hvr-icon-forward .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.1s;
|
||||
|
|
@ -2900,9 +2896,7 @@
|
|||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-forward:hover .fa, .hvr-icon-forward:hover .hover-icon,
|
||||
.hvr-icon-forward:focus .fa, .hvr-icon-forward:focus .hover-icon,
|
||||
.hvr-icon-forward:active .fa, .hvr-icon-forward:active .hover-icon {
|
||||
.hvr-icon-forward:hover .hvr-icon, .hvr-icon-forward:focus .hvr-icon, .hvr-icon-forward:active .hvr-icon {
|
||||
-webkit-transform: translateX(4px);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
|
@ -2941,15 +2935,12 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
}
|
||||
.hvr-icon-down .fa, .hvr-icon-down .hover-icon {
|
||||
.hvr-icon-down .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.hvr-icon-down:hover .fa, .hvr-icon-down:hover .hover-icon,
|
||||
.hvr-icon-down:focus .fa, .hvr-icon-down:focus .hover-icon,
|
||||
.hvr-icon-down:active .fa, .hvr-icon-down:active .hover-icon {
|
||||
.hvr-icon-down:hover .hvr-icon, .hvr-icon-down:focus .hvr-icon, .hvr-icon-down:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-down;
|
||||
animation-name: hvr-icon-down;
|
||||
-webkit-animation-duration: 0.75s;
|
||||
|
|
@ -2992,15 +2983,12 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
}
|
||||
.hvr-icon-up .fa, .hvr-icon-up .hover-icon {
|
||||
.hvr-icon-up .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.hvr-icon-up:hover .fa, .hvr-icon-up:hover .hover-icon,
|
||||
.hvr-icon-up:focus .fa, .hvr-icon-up:focus .hover-icon,
|
||||
.hvr-icon-up:active .fa, .hvr-icon-up:active .hover-icon {
|
||||
.hvr-icon-up:hover .hvr-icon, .hvr-icon-up:focus .hvr-icon, .hvr-icon-up:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-up;
|
||||
animation-name: hvr-icon-up;
|
||||
-webkit-animation-duration: 0.75s;
|
||||
|
|
@ -3016,9 +3004,8 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
}
|
||||
.hvr-icon-spin .fa, .hvr-icon-spin .hover-icon {
|
||||
.hvr-icon-spin .hvr-icon {
|
||||
-webkit-transition-duration: 1s;
|
||||
transition-duration: 1s;
|
||||
-webkit-transition-property: transform;
|
||||
|
|
@ -3026,9 +3013,7 @@
|
|||
-webkit-transition-timing-function: ease-in-out;
|
||||
transition-timing-function: ease-in-out;
|
||||
}
|
||||
.hvr-icon-spin:hover .fa, .hvr-icon-spin:hover .hover-icon,
|
||||
.hvr-icon-spin:focus .fa, .hvr-icon-spin:focus .hover-icon,
|
||||
.hvr-icon-spin:active .fa, .hvr-icon-spin:active .hover-icon {
|
||||
.hvr-icon-spin:hover .hvr-icon, .hvr-icon-spin:focus .hvr-icon, .hvr-icon-spin:active .hvr-icon {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
|
|
@ -3069,15 +3054,12 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
}
|
||||
.hvr-icon-drop .fa, .hvr-icon-drop .hover-icon {
|
||||
.hvr-icon-drop .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.hvr-icon-drop:hover .fa, .hvr-icon-drop:hover .hover-icon,
|
||||
.hvr-icon-drop:focus .fa, .hvr-icon-drop:focus .hover-icon,
|
||||
.hvr-icon-drop:active .fa, .hvr-icon-drop:active .hover-icon {
|
||||
.hvr-icon-drop:hover .hvr-icon, .hvr-icon-drop:focus .hvr-icon, .hvr-icon-drop:active .hvr-icon {
|
||||
opacity: 0;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
|
|
@ -3102,9 +3084,8 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
}
|
||||
.hvr-icon-fade .fa, .hvr-icon-fade .hover-icon {
|
||||
.hvr-icon-fade .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.5s;
|
||||
|
|
@ -3112,9 +3093,7 @@
|
|||
-webkit-transition-property: color;
|
||||
transition-property: color;
|
||||
}
|
||||
.hvr-icon-fade:hover .fa, .hvr-icon-fade:hover .hover-icon,
|
||||
.hvr-icon-fade:focus .fa, .hvr-icon-fade:focus .hover-icon,
|
||||
.hvr-icon-fade:active .fa, .hvr-icon-fade:active .hover-icon {
|
||||
.hvr-icon-fade:hover .hvr-icon, .hvr-icon-fade:focus .hvr-icon, .hvr-icon-fade:active .hvr-icon {
|
||||
color: #0F9E5E;
|
||||
}
|
||||
|
||||
|
|
@ -3146,17 +3125,16 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
}
|
||||
.hvr-icon-float-away .fa, .hvr-icon-float-away .hover-icon {
|
||||
.hvr-icon-float-away .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation-duration: 0.5s;
|
||||
animation-duration: 0.5s;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.hvr-icon-float-away:hover .fa, .hvr-icon-float-away:hover .hover-icon,
|
||||
.hvr-icon-float-away:focus .fa, .hvr-icon-float-away:focus .hover-icon,
|
||||
.hvr-icon-float-away:active .fa, .hvr-icon-float-away:active .hover-icon {
|
||||
.hvr-icon-float-away:hover .hvr-icon, .hvr-icon-float-away:focus .hvr-icon, .hvr-icon-float-away:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-float-away;
|
||||
animation-name: hvr-icon-float-away;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
|
|
@ -3191,9 +3169,8 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
}
|
||||
.hvr-icon-sink-away .fa, .hvr-icon-sink-away .hover-icon {
|
||||
.hvr-icon-sink-away .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-animation-duration: 0.5s;
|
||||
|
|
@ -3201,9 +3178,7 @@
|
|||
-webkit-animation-fill-mode: forwards;
|
||||
animation-fill-mode: forwards;
|
||||
}
|
||||
.hvr-icon-sink-away:hover .fa, .hvr-icon-sink-away:hover .hover-icon,
|
||||
.hvr-icon-sink-away:focus .fa, .hvr-icon-sink-away:focus .hover-icon,
|
||||
.hvr-icon-sink-away:active .fa, .hvr-icon-sink-away:active .hover-icon {
|
||||
.hvr-icon-sink-away:hover .hvr-icon, .hvr-icon-sink-away:focus .hvr-icon, .hvr-icon-sink-away:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-sink-away;
|
||||
animation-name: hvr-icon-sink-away;
|
||||
-webkit-animation-timing-function: ease-out;
|
||||
|
|
@ -3217,11 +3192,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-grow .fa, .hvr-icon-grow .hover-icon {
|
||||
.hvr-icon-grow .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3231,9 +3205,7 @@
|
|||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-grow:hover .fa, .hvr-icon-grow:hover .hover-icon,
|
||||
.hvr-icon-grow:focus .fa, .hvr-icon-grow:focus .hover-icon,
|
||||
.hvr-icon-grow:active .fa, .hvr-icon-grow:active .hover-icon {
|
||||
.hvr-icon-grow:hover .hvr-icon, .hvr-icon-grow:focus .hvr-icon, .hvr-icon-grow:active .hvr-icon {
|
||||
-webkit-transform: scale(1.3) translateZ(0);
|
||||
transform: scale(1.3) translateZ(0);
|
||||
}
|
||||
|
|
@ -3245,11 +3217,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-shrink .fa, .hvr-icon-shrink .hover-icon {
|
||||
.hvr-icon-shrink .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3259,9 +3230,7 @@
|
|||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-shrink:hover .fa, .hvr-icon-shrink:hover .hover-icon,
|
||||
.hvr-icon-shrink:focus .fa, .hvr-icon-shrink:focus .hover-icon,
|
||||
.hvr-icon-shrink:active .fa, .hvr-icon-shrink:active .hover-icon {
|
||||
.hvr-icon-shrink:hover .hvr-icon, .hvr-icon-shrink:focus .hvr-icon, .hvr-icon-shrink:active .hvr-icon {
|
||||
-webkit-transform: scale(0.8);
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
|
@ -3293,17 +3262,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
}
|
||||
.hvr-icon-pulse .fa, .hvr-icon-pulse .hover-icon {
|
||||
.hvr-icon-pulse .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-pulse:hover .fa, .hvr-icon-pulse:hover .hover-icon,
|
||||
.hvr-icon-pulse:focus .fa, .hvr-icon-pulse:focus .hover-icon,
|
||||
.hvr-icon-pulse:active .fa, .hvr-icon-pulse:active .hover-icon {
|
||||
.hvr-icon-pulse:hover .hvr-icon, .hvr-icon-pulse:focus .hvr-icon, .hvr-icon-pulse:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-pulse;
|
||||
animation-name: hvr-icon-pulse;
|
||||
-webkit-animation-duration: 1s;
|
||||
|
|
@ -3333,17 +3299,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
}
|
||||
.hvr-icon-pulse-grow .fa, .hvr-icon-pulse-grow .hover-icon {
|
||||
.hvr-icon-pulse-grow .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-pulse-grow:hover .fa, .hvr-icon-pulse-grow:hover .hover-icon,
|
||||
.hvr-icon-pulse-grow:focus .fa, .hvr-icon-pulse-grow:focus .hover-icon,
|
||||
.hvr-icon-pulse-grow:active .fa, .hvr-icon-pulse-grow:active .hover-icon {
|
||||
.hvr-icon-pulse-grow:hover .hvr-icon, .hvr-icon-pulse-grow:focus .hvr-icon, .hvr-icon-pulse-grow:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-pulse-grow;
|
||||
animation-name: hvr-icon-pulse-grow;
|
||||
-webkit-animation-duration: 0.3s;
|
||||
|
|
@ -3375,17 +3338,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
}
|
||||
.hvr-icon-pulse-shrink .fa, .hvr-icon-pulse-shrink .hover-icon {
|
||||
.hvr-icon-pulse-shrink .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-pulse-shrink:hover .fa, .hvr-icon-pulse-shrink:hover .hover-icon,
|
||||
.hvr-icon-pulse-shrink:focus .fa, .hvr-icon-pulse-shrink:focus .hover-icon,
|
||||
.hvr-icon-pulse-shrink:active .fa, .hvr-icon-pulse-shrink:active .hover-icon {
|
||||
.hvr-icon-pulse-shrink:hover .hvr-icon, .hvr-icon-pulse-shrink:focus .hvr-icon, .hvr-icon-pulse-shrink:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-pulse-shrink;
|
||||
animation-name: hvr-icon-pulse-shrink;
|
||||
-webkit-animation-duration: 0.3s;
|
||||
|
|
@ -3417,11 +3377,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-push .fa, .hvr-icon-push .hover-icon {
|
||||
.hvr-icon-push .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3431,9 +3390,7 @@
|
|||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-push:hover .fa, .hvr-icon-push:hover .hover-icon,
|
||||
.hvr-icon-push:focus .fa, .hvr-icon-push:focus .hover-icon,
|
||||
.hvr-icon-push:active .fa, .hvr-icon-push:active .hover-icon {
|
||||
.hvr-icon-push:hover .hvr-icon, .hvr-icon-push:focus .hvr-icon, .hvr-icon-push:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-push;
|
||||
animation-name: hvr-icon-push;
|
||||
-webkit-animation-duration: 0.3s;
|
||||
|
|
@ -3463,11 +3420,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-pop .fa, .hvr-icon-pop .hover-icon {
|
||||
.hvr-icon-pop .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3477,9 +3433,7 @@
|
|||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-pop:hover .fa, .hvr-icon-pop:hover .hover-icon,
|
||||
.hvr-icon-pop:focus .fa, .hvr-icon-pop:focus .hover-icon,
|
||||
.hvr-icon-pop:active .fa, .hvr-icon-pop:active .hover-icon {
|
||||
.hvr-icon-pop:hover .hvr-icon, .hvr-icon-pop:focus .hvr-icon, .hvr-icon-pop:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-pop;
|
||||
animation-name: hvr-icon-pop;
|
||||
-webkit-animation-duration: 0.3s;
|
||||
|
|
@ -3497,11 +3451,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-bounce .fa, .hvr-icon-bounce .hover-icon {
|
||||
.hvr-icon-bounce .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3511,9 +3464,7 @@
|
|||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-bounce:hover .fa, .hvr-icon-bounce:hover .hover-icon,
|
||||
.hvr-icon-bounce:focus .fa, .hvr-icon-bounce:focus .hover-icon,
|
||||
.hvr-icon-bounce:active .fa, .hvr-icon-bounce:active .hover-icon {
|
||||
.hvr-icon-bounce:hover .hvr-icon, .hvr-icon-bounce:focus .hvr-icon, .hvr-icon-bounce:active .hvr-icon {
|
||||
-webkit-transform: scale(1.5);
|
||||
transform: scale(1.5);
|
||||
-webkit-transition-timing-function: cubic-bezier(0.47, 2.02, 0.31, -0.36);
|
||||
|
|
@ -3527,11 +3478,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-rotate .fa, .hvr-icon-rotate .hover-icon {
|
||||
.hvr-icon-rotate .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3541,9 +3491,7 @@
|
|||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-rotate:hover .fa, .hvr-icon-rotate:hover .hover-icon,
|
||||
.hvr-icon-rotate:focus .fa, .hvr-icon-rotate:focus .hover-icon,
|
||||
.hvr-icon-rotate:active .fa, .hvr-icon-rotate:active .hover-icon {
|
||||
.hvr-icon-rotate:hover .hvr-icon, .hvr-icon-rotate:focus .hvr-icon, .hvr-icon-rotate:active .hvr-icon {
|
||||
-webkit-transform: rotate(20deg);
|
||||
transform: rotate(20deg);
|
||||
}
|
||||
|
|
@ -3555,11 +3503,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-grow-rotate .fa, .hvr-icon-grow-rotate .hover-icon {
|
||||
.hvr-icon-grow-rotate .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3569,9 +3516,7 @@
|
|||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-grow-rotate:hover .fa, .hvr-icon-grow-rotate:hover .hover-icon,
|
||||
.hvr-icon-grow-rotate:focus .fa, .hvr-icon-grow-rotate:focus .hover-icon,
|
||||
.hvr-icon-grow-rotate:active .fa, .hvr-icon-grow-rotate:active .hover-icon {
|
||||
.hvr-icon-grow-rotate:hover .hvr-icon, .hvr-icon-grow-rotate:focus .hvr-icon, .hvr-icon-grow-rotate:active .hvr-icon {
|
||||
-webkit-transform: scale(1.5) rotate(12deg);
|
||||
transform: scale(1.5) rotate(12deg);
|
||||
}
|
||||
|
|
@ -3583,11 +3528,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-float .fa, .hvr-icon-float .hover-icon {
|
||||
.hvr-icon-float .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3597,9 +3541,7 @@
|
|||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-float:hover .fa, .hvr-icon-float:hover .hover-icon,
|
||||
.hvr-icon-float:focus .fa, .hvr-icon-float:focus .hover-icon,
|
||||
.hvr-icon-float:active .fa, .hvr-icon-float:active .hover-icon {
|
||||
.hvr-icon-float:hover .hvr-icon, .hvr-icon-float:focus .hvr-icon, .hvr-icon-float:active .hvr-icon {
|
||||
-webkit-transform: translateY(-4px);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
|
@ -3611,11 +3553,10 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-sink .fa, .hvr-icon-sink .hover-icon {
|
||||
.hvr-icon-sink .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
-webkit-transition-duration: 0.3s;
|
||||
|
|
@ -3625,9 +3566,7 @@
|
|||
-webkit-transition-timing-function: ease-out;
|
||||
transition-timing-function: ease-out;
|
||||
}
|
||||
.hvr-icon-sink:hover .fa, .hvr-icon-sink:hover .hover-icon,
|
||||
.hvr-icon-sink:focus .fa, .hvr-icon-sink:focus .hover-icon,
|
||||
.hvr-icon-sink:active .fa, .hvr-icon-sink:active .hover-icon {
|
||||
.hvr-icon-sink:hover .hvr-icon, .hvr-icon-sink:focus .hvr-icon, .hvr-icon-sink:active .hvr-icon {
|
||||
-webkit-transform: translateY(4px);
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
|
@ -3679,17 +3618,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-bob .fa, .hvr-icon-bob .hover-icon {
|
||||
.hvr-icon-bob .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.hvr-icon-bob:hover .fa, .hvr-icon-bob:hover .hover-icon,
|
||||
.hvr-icon-bob:focus .fa, .hvr-icon-bob:focus .hover-icon,
|
||||
.hvr-icon-bob:active .fa, .hvr-icon-bob:active .hover-icon {
|
||||
.hvr-icon-bob:hover .hvr-icon, .hvr-icon-bob:focus .hvr-icon, .hvr-icon-bob:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-bob-float, hvr-icon-bob;
|
||||
animation-name: hvr-icon-bob-float, hvr-icon-bob;
|
||||
-webkit-animation-duration: .3s, 1.5s;
|
||||
|
|
@ -3753,17 +3689,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-hang .fa, .hvr-icon-hang .hover-icon {
|
||||
.hvr-icon-hang .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.hvr-icon-hang:hover .fa, .hvr-icon-hang:hover .hover-icon,
|
||||
.hvr-icon-hang:focus .fa, .hvr-icon-hang:focus .hover-icon,
|
||||
.hvr-icon-hang:active .fa, .hvr-icon-hang:active .hover-icon {
|
||||
.hvr-icon-hang:hover .hvr-icon, .hvr-icon-hang:focus .hvr-icon, .hvr-icon-hang:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-hang-sink, hvr-icon-hang;
|
||||
animation-name: hvr-icon-hang-sink, hvr-icon-hang;
|
||||
-webkit-animation-duration: .3s, 1.5s;
|
||||
|
|
@ -3839,17 +3772,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-wobble-horizontal .fa, .hvr-icon-wobble-horizontal .hover-icon {
|
||||
.hvr-icon-wobble-horizontal .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.hvr-icon-wobble-horizontal:hover .fa, .hvr-icon-wobble-horizontal:hover .hover-icon,
|
||||
.hvr-icon-wobble-horizontal:focus .fa, .hvr-icon-wobble-horizontal:focus .hover-icon,
|
||||
.hvr-icon-wobble-horizontal:active .fa, .hvr-icon-wobble-horizontal:active .hover-icon {
|
||||
.hvr-icon-wobble-horizontal:hover .hvr-icon, .hvr-icon-wobble-horizontal:focus .hvr-icon, .hvr-icon-wobble-horizontal:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-wobble-horizontal;
|
||||
animation-name: hvr-icon-wobble-horizontal;
|
||||
-webkit-animation-duration: 1s;
|
||||
|
|
@ -3919,17 +3849,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-wobble-vertical .fa, .hvr-icon-wobble-vertical .hover-icon {
|
||||
.hvr-icon-wobble-vertical .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.hvr-icon-wobble-vertical:hover .fa, .hvr-icon-wobble-vertical:hover .hover-icon,
|
||||
.hvr-icon-wobble-vertical:focus .fa, .hvr-icon-wobble-vertical:focus .hover-icon,
|
||||
.hvr-icon-wobble-vertical:active .fa, .hvr-icon-wobble-vertical:active .hover-icon {
|
||||
.hvr-icon-wobble-vertical:hover .hvr-icon, .hvr-icon-wobble-vertical:focus .hvr-icon, .hvr-icon-wobble-vertical:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-wobble-vertical;
|
||||
animation-name: hvr-icon-wobble-vertical;
|
||||
-webkit-animation-duration: 1s;
|
||||
|
|
@ -3967,17 +3894,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-buzz .fa, .hvr-icon-buzz .hover-icon {
|
||||
.hvr-icon-buzz .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.hvr-icon-buzz:hover .fa, .hvr-icon-buzz:hover .hover-icon,
|
||||
.hvr-icon-buzz:focus .fa, .hvr-icon-buzz:focus .hover-icon,
|
||||
.hvr-icon-buzz:active .fa, .hvr-icon-buzz:active .hover-icon {
|
||||
.hvr-icon-buzz:hover .hvr-icon, .hvr-icon-buzz:focus .hvr-icon, .hvr-icon-buzz:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-buzz;
|
||||
animation-name: hvr-icon-buzz;
|
||||
-webkit-animation-duration: 0.15s;
|
||||
|
|
@ -4079,17 +4003,14 @@
|
|||
-webkit-transform: perspective(1px) translateZ(0);
|
||||
transform: perspective(1px) translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
position: relative;
|
||||
-webkit-transition-duration: 0.3s;
|
||||
transition-duration: 0.3s;
|
||||
}
|
||||
.hvr-icon-buzz-out .fa, .hvr-icon-buzz-out .hover-icon {
|
||||
.hvr-icon-buzz-out .hvr-icon {
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.hvr-icon-buzz-out:hover .fa, .hvr-icon-buzz-out:hover .hover-icon,
|
||||
.hvr-icon-buzz-out:focus .fa, .hvr-icon-buzz-out:focus .hover-icon,
|
||||
.hvr-icon-buzz-out:active .fa, .hvr-icon-buzz-out:active .hover-icon {
|
||||
.hvr-icon-buzz-out:hover .hvr-icon, .hvr-icon-buzz-out:focus .hvr-icon, .hvr-icon-buzz-out:active .hvr-icon {
|
||||
-webkit-animation-name: hvr-icon-buzz-out;
|
||||
animation-name: hvr-icon-buzz-out;
|
||||
-webkit-animation-duration: 0.75s;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
111
index.html
111
index.html
|
|
@ -113,35 +113,90 @@
|
|||
|
||||
<h2>Icons</h2>
|
||||
|
||||
<small>Font icons courtesy of <a href="https://fortawesome.github.io/Font-Awesome/">FontAwesome</a>. <a href="https://github.com/IanLunn/Hover/#using-fontawesome-with-icon-effects">How to use FontAwesome icons</a> with Hover.css.</small>
|
||||
<small>Demo font icons courtesy of <a href="https://fortawesome.github.io/Font-Awesome/">FontAwesome</a>. <a href="https://github.com/IanLunn/Hover/#using-icon-effects">How to use icons</a> with Hover.css.</small>
|
||||
|
||||
<a href="#" class="hvr-icon-back"><i class="fa fa-chevron-circle-left"></i> Icon Back</a>
|
||||
<a href="#" class="hvr-icon-forward"><i class="fa fa-chevron-circle-right"></i> Icon Forward</a>
|
||||
<a href="#" class="hvr-icon-down"><i class="fa fa-arrow-circle-o-down"></i> Icon Down</a>
|
||||
<a href="#" class="hvr-icon-up"><i class="fa fa-arrow-circle-o-up"></i> Icon Up</a>
|
||||
<a href="#" class="hvr-icon-spin"><i class="fa fa-refresh"></i> Icon Spin</a>
|
||||
<a href="#" class="hvr-icon-drop"><i class="fa fa-tint"></i> Icon Drop</a>
|
||||
<a href="#" class="hvr-icon-fade"><i class="fa fa-check"></i> Icon Fade</a>
|
||||
<a href="#" class="hvr-icon-float-away"><i class="fa fa-plus-circle"></i> Icon Float Away</a>
|
||||
<a href="#" class="hvr-icon-sink-away"><i class="fa fa-minus-circle"></i> Icon Sink Away</a>
|
||||
<a href="#" class="hvr-icon-grow"><i class="fa fa-smile-o"></i> Icon Grow</a>
|
||||
<a href="#" class="hvr-icon-shrink"><i class="fa fa-frown-o"></i> Icon Shrink</a>
|
||||
<a href="#" class="hvr-icon-pulse"><i class="fa fa-home"></i> Icon Pulse</a>
|
||||
<a href="#" class="hvr-icon-pulse-grow"><i class="fa fa-home"></i> Icon Pulse Grow</a>
|
||||
<a href="#" class="hvr-icon-pulse-shrink"><i class="fa fa-home"></i> Icon Pulse Shrink</a>
|
||||
<a href="#" class="hvr-icon-push"><i class="fa fa-star-o"></i> Icon Push</a>
|
||||
<a href="#" class="hvr-icon-pop"><i class="fa fa-star"></i> Icon Pop</a>
|
||||
<a href="#" class="hvr-icon-bounce"><i class="fa fa-thumbs-o-up"></i> Icon Bounce</a>
|
||||
<a href="#" class="hvr-icon-rotate"><i class="fa fa-paperclip"></i> Icon Rotate</a>
|
||||
<a href="#" class="hvr-icon-grow-rotate"><i class="fa fa-phone"></i> Icon Grow Rotate</a>
|
||||
<a href="#" class="hvr-icon-float"><i class="fa fa-arrow-circle-o-up"></i> Icon Float</a>
|
||||
<a href="#" class="hvr-icon-sink"><i class="fa fa-arrow-circle-o-down"></i> Icon Sink</a>
|
||||
<a href="#" class="hvr-icon-bob"><i class="fa fa-chevron-up"></i> Icon Bob</a>
|
||||
<a href="#" class="hvr-icon-hang"><i class="fa fa-chevron-down"></i> Icon Hang</a>
|
||||
<a href="#" class="hvr-icon-wobble-horizontal"><i class="fa fa-arrow-right"></i> Icon Wobble Horizontal</a>
|
||||
<a href="#" class="hvr-icon-wobble-vertical"><i class="fa fa-arrow-up"></i> Icon Wobble Vertical</a>
|
||||
<a href="#" class="hvr-icon-buzz"><i class="fa fa-clock-o"></i> Icon Buzz</a>
|
||||
<a href="#" class="hvr-icon-buzz-out"><i class="fa fa-lock"></i> Icon Buzz Out</a>
|
||||
<a href="#" class="hvr-icon-back">
|
||||
<i class="fa fa-chevron-circle-left hvr-icon"></i> Icon Back
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-forward">
|
||||
Icon Forward
|
||||
<i class="fa fa-chevron-circle-right hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-down">
|
||||
Icon Down <i class="fa fa-arrow-circle-o-down hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-up">
|
||||
Icon Up <i class="fa fa-arrow-circle-o-up hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-spin">
|
||||
Icon Spin <i class="fa fa-refresh hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-drop">
|
||||
Icon Drop <i class="fa fa-tint hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-fade">
|
||||
Icon Fade <i class="fa fa-check hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-float-away">
|
||||
Icon Float Away <i class="fa fa-plus-circle hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-sink-away">
|
||||
Icon Sink Away <i class="fa fa-minus-circle hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-grow">
|
||||
Icon Grow <i class="fa fa-smile-o hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-shrink">
|
||||
Icon Shrink <i class="fa fa-frown-o hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-pulse">
|
||||
Icon Pulse <i class="fa fa-home hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-pulse-grow">
|
||||
Icon Pulse Grow <i class="fa fa-home hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-pulse-shrink">
|
||||
Icon Pulse Shrink <i class="fa fa-home hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-push">
|
||||
Icon Push <i class="fa fa-star-o hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-pop">
|
||||
Icon Pop <i class="fa fa-star hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-bounce">
|
||||
Icon Bounce <i class="fa fa-thumbs-o-up hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-rotate">
|
||||
Icon Rotate <i class="fa fa-paperclip hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-grow-rotate">
|
||||
Icon Grow Rotate <i class="fa fa-phone hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-float">
|
||||
Icon Float <i class="fa fa-arrow-circle-o-up hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-sink">
|
||||
Icon Sink <i class="fa fa-arrow-circle-o-down hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-bob">
|
||||
Icon Bob <i class="fa fa-chevron-up hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-hang">
|
||||
Icon Hang <i class="fa fa-chevron-down hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-wobble-horizontal">
|
||||
Icon Wobble Horizontal <i class="fa fa-arrow-right hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-wobble-vertical">
|
||||
Icon Wobble Vertical <i class="fa fa-arrow-up hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-buzz">
|
||||
Icon Buzz <i class="fa fa-clock-o hvr-icon"></i>
|
||||
</a>
|
||||
<a href="#" class="hvr-icon-buzz-out">
|
||||
Icon Buzz Out <i class="fa fa-lock hvr-icon"></i>
|
||||
</a>
|
||||
|
||||
|
||||
<h2>Border Transitions</h2>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Back */
|
||||
.icon-back() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateX(-4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,11 +19,9 @@
|
|||
|
||||
.icon-bob() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +29,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-bob-float, @{nameSpace}-icon-bob");
|
||||
.prefixed(animation-duration, ~".3s, 1.5s");
|
||||
.prefixed(animation-delay, ~"0s, .3s");
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@
|
|||
|
||||
.icon-bounce-out() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -22,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(.9));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,9 @@
|
|||
|
||||
.icon-bounce() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -17,7 +15,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(1.5));
|
||||
.prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,11 +43,9 @@
|
|||
|
||||
.icon-buzz-out() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -55,7 +53,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-buzz-out");
|
||||
.prefixed(animation-duration, .75s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -11,11 +11,9 @@
|
|||
|
||||
.icon-buzz() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -23,7 +21,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-buzz");
|
||||
.prefixed(animation-duration, .15s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -14,10 +14,8 @@
|
|||
/* Icon Down */
|
||||
.icon-down() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +23,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-down");
|
||||
.prefixed(animation-duration, .75s);
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
|
|
|
|||
|
|
@ -19,10 +19,8 @@
|
|||
/* Icon Drop */
|
||||
.icon-drop() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +28,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
opacity: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-drop");
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
/* Icon Fade */
|
||||
.icon-fade() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, .5s);
|
||||
.prefixed(transition-property, color);
|
||||
|
|
@ -14,7 +12,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
color: #0F9E5E;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,11 +13,9 @@
|
|||
/* Icon Float Away */
|
||||
.icon-float-away() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
.fa, .hover-icon {
|
||||
opacity: 0;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(animation-duration, @slowDuration);
|
||||
.prefixed(animation-fill-mode, forwards);
|
||||
}
|
||||
|
|
@ -26,7 +24,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-float-away");
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Float */
|
||||
.icon-float() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateY(-4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Forward */
|
||||
.icon-forward() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @fastDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateX(4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@
|
|||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @duration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -18,7 +16,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(1.5) rotate(12deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Grow */
|
||||
.icon-grow() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(1.3) translateZ(0));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,11 +19,9 @@
|
|||
|
||||
.icon-hang() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +29,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-hang-sink, @{nameSpace}-icon-hang");
|
||||
.prefixed(animation-duration, ~".3s, 1.5s");
|
||||
.prefixed(animation-delay, ~"0s, .3s");
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@
|
|||
|
||||
.icon-pop() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -22,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pop");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,10 +7,8 @@
|
|||
|
||||
.icon-pulse-grow() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -19,7 +17,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pulse-grow");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,10 +7,8 @@
|
|||
|
||||
.icon-pulse-shrink() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -19,7 +17,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pulse-shrink");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -11,10 +11,8 @@
|
|||
|
||||
.icon-pulse() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -23,7 +21,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-pulse");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@
|
|||
|
||||
.icon-push() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -22,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-push");
|
||||
.prefixed(animation-duration, @mediumDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@
|
|||
@duration: @mediumDuration;
|
||||
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @duration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @duration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -18,7 +16,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, rotate(20deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Shrink */
|
||||
.icon-shrink() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, scale(.8));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,11 +13,8 @@
|
|||
/* Icon Sink Away */
|
||||
.icon-sink-away() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: @spaceBetweenTextAndArrows;
|
||||
|
||||
.fa, .hover-icon {
|
||||
opacity: 0;
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(animation-duration, @slowDuration);
|
||||
.prefixed(animation-fill-mode, forwards);
|
||||
|
|
@ -27,7 +24,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-sink-away");
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Sink */
|
||||
.icon-sink() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
.prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateY(4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
/* Icon Spin */
|
||||
.icon-spin() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transition-duration, 1s);
|
||||
.prefixed(transition-property, transform);
|
||||
.prefixed(transition-timing-function, ease-in-out);
|
||||
|
|
@ -14,7 +12,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, rotate(360deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,8 @@
|
|||
/* Icon Up */
|
||||
.icon-up() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +23,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-up");
|
||||
.prefixed(animation-duration, .75s);
|
||||
.prefixed(animation-timing-function, ease-out);
|
||||
|
|
|
|||
|
|
@ -27,11 +27,9 @@
|
|||
|
||||
.icon-wobble-horizontal() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -39,7 +37,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-wobble-horizontal");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
|
|
|
|||
|
|
@ -27,11 +27,9 @@
|
|||
|
||||
.icon-wobble-vertical() {
|
||||
.hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
.prefixed(transition-duration, @mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -39,7 +37,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-icon-wobble-vertical");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-timing-function, ease-in-out);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.2.2
|
||||
* Version: 2.3.0
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "hover.css",
|
||||
"author": "Ian Lunn",
|
||||
"version": "2.2.2",
|
||||
"version": "2.3.0",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/IanLunn/Hover"
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Back */
|
||||
@mixin icon-back {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
@include prefixed(transition-duration, $fastDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $fastDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateX(-4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,11 +19,9 @@
|
|||
|
||||
@mixin icon-bob {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +29,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, "#{$nameSpace}-icon-bob-float, #{$nameSpace}-icon-bob");
|
||||
@include prefixed(animation-duration, ".3s, 1.5s");
|
||||
@include prefixed(animation-delay, "0s, .3s");
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@
|
|||
|
||||
@mixin icon-bounce-out {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -22,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, scale(.9));
|
||||
@include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,9 @@
|
|||
|
||||
@mixin icon-bounce {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -17,7 +15,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, scale(1.5));
|
||||
@include prefixed(transition-timing-function, cubic-bezier(.47,2.02,.31,-0.36));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -43,11 +43,9 @@
|
|||
|
||||
@mixin icon-buzz-out {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -55,7 +53,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-buzz-out);
|
||||
@include prefixed(animation-duration, .75s);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -11,11 +11,9 @@
|
|||
|
||||
@mixin icon-buzz {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -23,7 +21,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-buzz);
|
||||
@include prefixed(animation-duration, .15s);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -14,10 +14,8 @@
|
|||
/* Icon Down */
|
||||
@mixin icon-down {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +23,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-down);
|
||||
@include prefixed(animation-duration, .75s);
|
||||
@include prefixed(animation-timing-function, ease-out);
|
||||
|
|
|
|||
|
|
@ -19,10 +19,8 @@
|
|||
/* Icon Drop */
|
||||
@mixin icon-drop {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -30,7 +28,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
opacity: 0;
|
||||
@include prefixed(transition-duration, #{$mediumDuration});
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-drop);
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
/* Icon Fade */
|
||||
@mixin icon-fade {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, .5s);
|
||||
@include prefixed(transition-property, color);
|
||||
|
|
@ -14,7 +12,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
color: #0F9E5E;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,11 +13,9 @@
|
|||
/* Icon Float Away */
|
||||
@mixin icon-float-away {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
.fa, .hover-icon {
|
||||
opacity: 0;
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(animation-duration, #{$slowDuration});
|
||||
@include prefixed(animation-fill-mode, forwards);
|
||||
}
|
||||
|
|
@ -26,7 +24,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-float-away);
|
||||
@include prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Float */
|
||||
@mixin icon-float {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateY(-4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Forward */
|
||||
@mixin icon-forward {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
@include prefixed(transition-duration, $fastDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $fastDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateX(4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@
|
|||
$duration: $mediumDuration;
|
||||
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $duration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $duration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -18,7 +16,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, scale(1.5) rotate(12deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Grow */
|
||||
@mixin icon-grow {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, scale(1.3) translateZ(0));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,11 +19,9 @@
|
|||
|
||||
@mixin icon-hang {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -31,7 +29,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, "#{$nameSpace}-icon-hang-sink, #{$nameSpace}-icon-hang");
|
||||
@include prefixed(animation-duration, ".3s, 1.5s");
|
||||
@include prefixed(animation-delay, "0s, .3s");
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@
|
|||
|
||||
@mixin icon-pop {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -22,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-pop);
|
||||
@include prefixed(animation-duration, $mediumDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,10 +7,8 @@
|
|||
|
||||
@mixin icon-pulse-grow {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -19,7 +17,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-pulse-grow);
|
||||
@include prefixed(animation-duration, $mediumDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,10 +7,8 @@
|
|||
|
||||
@mixin icon-pulse-shrink {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
.fa, .hover-icon {
|
||||
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -19,7 +17,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-pulse-shrink);
|
||||
@include prefixed(animation-duration, $mediumDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -11,10 +11,8 @@
|
|||
|
||||
@mixin icon-pulse {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-timing-function, ease-out);
|
||||
}
|
||||
|
|
@ -23,7 +21,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-pulse);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -7,11 +7,9 @@
|
|||
|
||||
@mixin icon-push {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -22,7 +20,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-push);
|
||||
@include prefixed(animation-duration, $mediumDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
|
|
|
|||
|
|
@ -3,11 +3,9 @@
|
|||
$duration: $mediumDuration;
|
||||
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $duration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $duration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -18,7 +16,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, rotate(20deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Shrink */
|
||||
@mixin icon-shrink {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, scale(.8));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,12 +13,9 @@
|
|||
/* Icon Sink Away */
|
||||
@mixin icon-sink-away {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: #{$spaceBetweenTextAndArrows};
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
opacity: 0;
|
||||
@include prefixed(animation-duration, #{$slowDuration});
|
||||
@include prefixed(animation-fill-mode, forwards);
|
||||
}
|
||||
|
|
@ -27,7 +24,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-sink-away);
|
||||
@include prefixed(animation-timing-function, ease-out);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
/* Icon Sink */
|
||||
@mixin icon-sink {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
@include prefixed(transition-property, transform);
|
||||
|
|
@ -16,7 +14,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateY(4px));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,8 @@
|
|||
/* Icon Spin */
|
||||
@mixin icon-spin {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transition-duration, 1s);
|
||||
@include prefixed(transition-property, transform);
|
||||
@include prefixed(transition-timing-function, ease-in-out);
|
||||
|
|
@ -14,7 +12,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, rotate(360deg));
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,8 @@
|
|||
/* Icon Up */
|
||||
@mixin icon-up {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -25,7 +23,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-up);
|
||||
@include prefixed(animation-duration, .75s);
|
||||
@include prefixed(animation-timing-function, ease-out);
|
||||
|
|
|
|||
|
|
@ -27,11 +27,9 @@
|
|||
|
||||
@mixin icon-wobble-horizontal {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -39,7 +37,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-wobble-horizontal);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, ease-in-out);
|
||||
|
|
|
|||
|
|
@ -27,11 +27,9 @@
|
|||
|
||||
@mixin icon-wobble-vertical {
|
||||
@include hacks();
|
||||
position: relative;
|
||||
padding-right: 0;
|
||||
@include prefixed(transition-duration, $mediumDuration);
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(transform, translateZ(0));
|
||||
}
|
||||
|
||||
|
|
@ -39,7 +37,7 @@
|
|||
&:focus,
|
||||
&:active {
|
||||
|
||||
.fa, .hover-icon {
|
||||
.hvr-icon {
|
||||
@include prefixed(animation-name, #{$nameSpace}-icon-wobble-vertical);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-timing-function, ease-in-out);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.2.2
|
||||
* Version: 2.3.0
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
|
|
|||
Loading…
Reference in New Issue