Robot/animate.css
1
0
Fork 0
mirror of https://github.com/animate-css/animate.css.git synced 2024-11-14 08:11:09 +01:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #465 from FelipeMartinin/master

Browse source 
New animation: headShake
This commit is contained in:
Daniel Eden 2015-12-06 17:29:20 +01:00
commit f017ea5918
5 changed files with 110 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -21,6 +21,7 @@
* `pulse`
* `rubberBand`
* `shake`
* `headShake`
* `swing`
* `tada`
* `wobble`
@ -157,6 +158,7 @@ Next, run `grunt watch` to watch for changes and compile your custom builds. For
"flash": false,
"pulse": false,
"shake": true,
"headShake": true,
"swing": true,
"tada": true,
"wobble": true,

1
animate-config.json
View file

@ -6,6 +6,7 @@
"pulse": true,
"rubberBand": true,
"shake": true,
"headShake": true,
"swing": true,
"tada": true,
"wobble": true,

79
animate.css vendored
View file

@ -25,18 +25,14 @@ Copyright (c) 2015 Daniel Eden
animation-duration: 2s;
}
.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
.animated.flipOutX,
.animated.flipOutY {
-webkit-animation-duration: .75s;
animation-duration: .75s;
}
@-webkit-keyframes bounce {
from, 20%, 53%, 80%, to {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
@ -284,6 +280,77 @@ Copyright (c) 2015 Daniel Eden
animation-name: shake;
}
@-webkit-keyframes headShake {
0 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
@keyframes headShake {
0 {
-webkit-transform: translateX(0);
transform: translateX(0);
}
6.5% {
-webkit-transform: translateX(-6px) rotateY(-9deg);
transform: translateX(-6px) rotateY(-9deg);
}
18.5% {
-webkit-transform: translateX(5px) rotateY(7deg);
transform: translateX(5px) rotateY(7deg);
}
31.5% {
-webkit-transform: translateX(-3px) rotateY(-5deg);
transform: translateX(-3px) rotateY(-5deg);
}
43.5% {
-webkit-transform: translateX(2px) rotateY(3deg);
transform: translateX(2px) rotateY(3deg);
}
50% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.headShake {
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-name: headShake;
animation-name: headShake;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate3d(0, 0, 1, 15deg);

2
animate.min.css vendored
View file

File diff suppressed because one or more lines are too long

33
source/attention_seekers/headShake.css Normal file
View file

@ -0,0 +1,33 @@
@keyframes headShake {
0 {
transform: translateX(0)
}
6.5% {
transform: translateX(-6px) rotateY(-9deg)
}
18.5% {
transform: translateX(5px) rotateY(7deg)
}
31.5% {
transform: translateX(-3px) rotateY(-5deg)
}
43.5% {
transform: translateX(2px) rotateY(3deg)
}
50% {
transform: translateX(0)
}
}
.headShake {
animation-timing-function: ease-in-out;
animation-name: headShake;
}