mirror of https://github.com/IanLunn/Hover.git
Added back-pulse effect
This commit is contained in:
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 lots of new effects
|
||||||
- Added LESS support
|
- Added LESS support
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "Hover.css",
|
"name": "Hover.css",
|
||||||
"version": "2.0.1",
|
"version": "2.0.2",
|
||||||
"homepage": "http://ianlunn.github.io/Hover",
|
"homepage": "http://ianlunn.github.io/Hover",
|
||||||
"authors": [
|
"authors": [
|
||||||
"Ian Lunn <hello@ianlunn.co.uk>"
|
"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/)
|
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||||
* Version: 2.0.1
|
* Version: 2.0.2
|
||||||
* Author: Ian Lunn @IanLunn
|
* Author: Ian Lunn @IanLunn
|
||||||
* Author URL: http://ianlunn.co.uk/
|
* Author URL: http://ianlunn.co.uk/
|
||||||
* Github: https://github.com/IanLunn/Hover
|
* Github: https://github.com/IanLunn/Hover
|
||||||
|
@ -1374,54 +1374,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
/* BACKGROUND TRANSITIONS */
|
/* 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 */
|
/* Fade */
|
||||||
.hvr-fade {
|
.hvr-fade {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -1443,6 +1395,50 @@
|
||||||
color: white;
|
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 */
|
/* Sweep To Right */
|
||||||
.hvr-sweep-to-right {
|
.hvr-sweep-to-right {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
|
@ -71,9 +71,9 @@
|
||||||
|
|
||||||
|
|
||||||
<h2>Background Transitions</h2>
|
<h2>Background Transitions</h2>
|
||||||
|
|
||||||
<a href="#" class="hvr-back-pulse">Back Pulse</a>
|
|
||||||
<a href="#" class="hvr-fade">Fade</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-right">Sweep To Right</a>
|
||||||
<a href="#" class="hvr-sweep-to-left">Sweep To Left</a>
|
<a href="#" class="hvr-sweep-to-left">Sweep To Left</a>
|
||||||
<a href="#" class="hvr-sweep-to-bottom">Sweep To Bottom</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/)
|
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||||
* Version: 2.0.1
|
* Version: 2.0.2
|
||||||
* Author: Ian Lunn @IanLunn
|
* Author: Ian Lunn @IanLunn
|
||||||
* Author URL: http://ianlunn.co.uk/
|
* Author URL: http://ianlunn.co.uk/
|
||||||
* Github: https://github.com/IanLunn/Hover
|
* 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";
|
@import "effects/background-transitions/_sweep-to-right";
|
||||||
& when(@includeClasses = true) {
|
& when(@includeClasses = true) {
|
||||||
.@{nameSpace}-sweep-to-right {
|
.@{nameSpace}-sweep-to-right {
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "hover.css",
|
"name": "hover.css",
|
||||||
"version": "2.0.1",
|
"version": "2.0.2",
|
||||||
"author": "Ian Lunn",
|
"author": "Ian Lunn",
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"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/)
|
* Hover.css (http://ianlunn.github.io/Hover/)
|
||||||
* Version: 2.0.1
|
* Version: 2.0.2
|
||||||
* Author: Ian Lunn @IanLunn
|
* Author: Ian Lunn @IanLunn
|
||||||
* Author URL: http://ianlunn.co.uk/
|
* Author URL: http://ianlunn.co.uk/
|
||||||
* Github: https://github.com/IanLunn/Hover
|
* 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";
|
@import "effects/background-transitions/sweep-to-right";
|
||||||
@if $includeClasses {
|
@if $includeClasses {
|
||||||
.#{$nameSpace}-sweep-to-right {
|
.#{$nameSpace}-sweep-to-right {
|
||||||
|
|
Loading…
Reference in New Issue