mirror of https://github.com/IanLunn/Hover.git
Added back-pulse effect
This commit is contained in:
IanLunn
parent
03c745b277
commit
19a27a405e
11
HISTORY.md
11
HISTORY.md
|
|
@ -1,4 +1,13 @@
|
|||
## 2.0.0 - Jan 7, 2014
|
||||
## 2.0.2 - Jan 27, 2015
|
||||
|
||||
- Added `back-pulse` effect
|
||||
|
||||
## 2.0.1 - Jan 26, 2015
|
||||
|
||||
- Added `includeClasses` option to Sass/LESS so you can now generate CSS with or without Hover.css default class names
|
||||
- Added `!default` flags to Sass variables in `_options.scss`
|
||||
|
||||
## 2.0.0 - Jan 7, 2015
|
||||
|
||||
- Added lots of new effects
|
||||
- Added LESS support
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "Hover.css",
|
||||
"version": "2.0.1",
|
||||
"version": "2.0.2",
|
||||
"homepage": "http://ianlunn.github.io/Hover",
|
||||
"authors": [
|
||||
"Ian Lunn <hello@ianlunn.co.uk>"
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.0.1
|
||||
* Version: 2.0.2
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
|
@ -1374,54 +1374,6 @@
|
|||
}
|
||||
|
||||
/* BACKGROUND TRANSITIONS */
|
||||
/* Back Pulse */
|
||||
@-webkit-keyframes hvr-back-pulse {
|
||||
0% {
|
||||
-webkit-opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
-webkit-opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hvr-back-pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
||||
.hvr-back-pulse {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-transition-duration: 0.2s;
|
||||
transition-duration: 0.2s;
|
||||
-webkit-transition-property: color, background-color;
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
.hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active {
|
||||
-webkit-animation-name: hvr-back-pulse;
|
||||
animation-name: hvr-back-pulse;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
background-color: #2091d1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Fade */
|
||||
.hvr-fade {
|
||||
display: inline-block;
|
||||
|
|
@ -1443,6 +1395,50 @@
|
|||
color: white;
|
||||
}
|
||||
|
||||
/* Back Pulse */
|
||||
@-webkit-keyframes hvr-back-pulse {
|
||||
50% {
|
||||
background-color: rgba(32, 152, 209, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hvr-back-pulse {
|
||||
50% {
|
||||
background-color: rgba(32, 152, 209, 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
.hvr-back-pulse {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow: hidden;
|
||||
-webkit-transition-duration: 0.5s;
|
||||
transition-duration: 0.5s;
|
||||
-webkit-transition-property: color, background-color;
|
||||
transition-property: color, background-color;
|
||||
}
|
||||
.hvr-back-pulse:hover, .hvr-back-pulse:focus, .hvr-back-pulse:active {
|
||||
-webkit-animation-name: hvr-back-pulse;
|
||||
animation-name: hvr-back-pulse;
|
||||
-webkit-animation-duration: 1s;
|
||||
animation-duration: 1s;
|
||||
-webkit-animation-delay: 0.5s;
|
||||
animation-delay: 0.5s;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
background-color: #2098d1;
|
||||
background-color: #2098d1;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Sweep To Right */
|
||||
.hvr-sweep-to-right {
|
||||
display: inline-block;
|
||||
|
|
|
|||
|
|
@ -71,9 +71,9 @@
|
|||
|
||||
|
||||
<h2>Background Transitions</h2>
|
||||
|
||||
<a href="#" class="hvr-back-pulse">Back Pulse</a>
|
||||
|
||||
<a href="#" class="hvr-fade">Fade</a>
|
||||
<a href="#" class="hvr-back-pulse">Back Pulse</a>
|
||||
<a href="#" class="hvr-sweep-to-right">Sweep To Right</a>
|
||||
<a href="#" class="hvr-sweep-to-left">Sweep To Left</a>
|
||||
<a href="#" class="hvr-sweep-to-bottom">Sweep To Bottom</a>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/* Back Pulse */
|
||||
.keyframes(~"@{nameSpace}-back-pulse", {
|
||||
50% {
|
||||
background-color: rgba(32, 152, 209, .75);
|
||||
}
|
||||
});
|
||||
|
||||
.back-pulse() {
|
||||
.hacks();
|
||||
overflow: hidden;
|
||||
.prefixed(transition-duration, @slowDuration);
|
||||
.prefixed(transition-property, "color, background-color");
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
.prefixed(animation-name, ~"@{nameSpace}-back-pulse");
|
||||
.prefixed(animation-duration, 1s);
|
||||
.prefixed(animation-delay, @slowDuration);
|
||||
.prefixed(animation-timing-function, linear);
|
||||
.prefixed(animation-iteration-count, infinite);
|
||||
background-color: @activeColor;
|
||||
background-color: rgba(32, 152, 209, 1);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.0.1
|
||||
* Version: 2.0.2
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
|
@ -215,6 +215,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@import "effects/background-transitions/_back-pulse";
|
||||
& when(@includeClasses = true) {
|
||||
.@{nameSpace}-back-pulse {
|
||||
.back-pulse();
|
||||
}
|
||||
}
|
||||
|
||||
@import "effects/background-transitions/_sweep-to-right";
|
||||
& when(@includeClasses = true) {
|
||||
.@{nameSpace}-sweep-to-right {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "hover.css",
|
||||
"version": "2.0.1",
|
||||
"version": "2.0.2",
|
||||
"author": "Ian Lunn",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
/* Back Pulse */
|
||||
@include keyframes(#{$nameSpace}-back-pulse) {
|
||||
50% {
|
||||
background-color: rgba(32, 152, 209, .75);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin back-pulse {
|
||||
@include hacks();
|
||||
overflow: hidden;
|
||||
@include prefixed(transition-duration, $slowDuration);
|
||||
@include prefixed(transition-property, "color, background-color");
|
||||
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
@include prefixed(animation-name, #{$nameSpace}-back-pulse);
|
||||
@include prefixed(animation-duration, 1s);
|
||||
@include prefixed(animation-delay, $slowDuration);
|
||||
@include prefixed(animation-timing-function, linear);
|
||||
@include prefixed(animation-iteration-count, infinite);
|
||||
background-color: $activeColor;
|
||||
background-color: rgba(32, 152, 209, 1);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
/*!
|
||||
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||
* Version: 2.0.1
|
||||
* Version: 2.0.2
|
||||
* Author: Ian Lunn @IanLunn
|
||||
* Author URL: http://ianlunn.co.uk/
|
||||
* Github: https://github.com/IanLunn/Hover
|
||||
|
|
@ -214,6 +214,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
@import "effects/background-transitions/back-pulse";
|
||||
@if $includeClasses {
|
||||
.#{$nameSpace}-back-pulse {
|
||||
@include back-pulse();
|
||||
}
|
||||
}
|
||||
|
||||
@import "effects/background-transitions/sweep-to-right";
|
||||
@if $includeClasses {
|
||||
.#{$nameSpace}-sweep-to-right {
|
||||
|
|
|
|||
Loading…
Reference in New Issue