@keyframes kfRotateY {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
.animRotateY
{
animation-duration: 2s;
animation-name: kfRotateY;
animation-iteration-count: infinite;
animation-timing-function:linear;
}
@keyframes kfRotateMinusY {
from {
transform: rotateY(-180deg);
}
to {
transform: rotateY(180deg);
}
}
.animRotateMinusY
{
animation-duration: 2s;
animation-name: kfRotateMinusY;
animation-iteration-count: infinite;
animation-timing-function:linear;
}
@-webkit-keyframes kfShake {
0% {
transform:translate3d(0, 0, 0) rotateZ(0deg);
}
25% {
transform: translate3d(0, -20px, 0) rotateZ(20deg);
}
50% {
transform: translate3d(-20px, 0, 0) rotateZ(-20deg);
}
100% {
transform: translate3d(0, -20px, 0) rotateZ(-20deg);
}
}
.animShake
{
animation-duration: 1s;
animation-name: kfShake;
animation-iteration-count: infinite;
animation-timing-function:ease-in-out;
}
@keyframes kfFly {
0% {
transform:translate3d(0, 0, 0);
}
25% {
transform: translate3d(100px, -100px, 20px0);
}
50% {
transform: translate3d(200px, -200px, 40px);
}
100% {
transform: translate3d(400px, -300px, 20px);
}
}
.animFly
{
animation-duration: 2s;
animation-name: kfFly;
animation-iteration-count: 2;
animation-timing-function:cubic-bezier(0.1, 0.2, 0.8, 1);
animation-direction:alternate;
}
@keyframes kfSweep {
0% {
transform:translate3d(0, 0, 0) rotateZ(0deg);
}
25% {
transform: translate3d(50px, -100px, 0);
}
50% {
transform: translate3d(100px, -200px, 0);
}
100% {
transform: translate3d(150px, -300px, 0);
}
}
.animFly
{
animation-duration: 1s;
animation-name: kfSweep;
animation-iteration-count: infinite;
animation-timing-function:cubic-bezier(0.1, 0.2, 0.5, 1);
}