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

Added spin animation

Browse source
This commit is contained in:
Bradley J. Spaulding 2014-03-09 16:49:40 -04:00
parent d962a26393
commit 4c3c09221d
4 changed files with 65 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
animate-config.json
View file

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

45
animate.css vendored
View file

@ -242,6 +242,51 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
animation-name: shake;
}
@-webkit-keyframes spin {
0% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
transform: rotate(-200deg);
}
100% {
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
transform: rotate(200deg);
}
}
@keyframes spin {
0% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(-200deg);
-ms-transform: rotate(-200deg);
transform: rotate(-200deg);
}
100% {
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: rotate(200deg);
-ms-transform: rotate(200deg);
transform: rotate(200deg);
}
}
.spin {
-webkit-animation-name: spin;
animation-name: spin;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes swing {
20% {
-webkit-transform: rotate(15deg);

2
animate.min.css vendored
View file

File diff suppressed because one or more lines are too long

18
source/attention_seekers/spin.css Normal file
View file

@ -0,0 +1,18 @@
@keyframes spin {
0% {
transform-origin: center center;
transform: rotate(-200deg);
}
100% {
transform-origin: center center;
transform: rotate(200deg);
}
}
.spin {
animation-name: spin;
animation-timing-function: linear;
animation-iteration-count: infinite;
}