CODEWITHSUNDEEP
htmlcss
Perspolis
Perspolis

Reputation: 862

CSS3 not work shake animation effect

I have This CSS3 animate code for shake effect in DIV action: (i copy this code from HERE)

CSS CODE:

.shake {
    -webkit-animation-name: shake ;
    animation-name: shake;
}
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}
@keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}

Now, in action when i see div shake action not work!?

for see css effect, How do can i fix this ?

DEMO

Upvotes: 3

Views: 1961

Answers (3)

DavidDomain
DavidDomain

Reputation: 15293

The animated class is missing. Take a look here to find more information on how Animate.css works. You actually do not need to copy the code. You can include the library into the header of your document.

@-webkit-keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0)
  }
}
@keyframes shake {
  0%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0)
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translate3d(-10px, 0, 0);
    transform: translate3d(-10px, 0, 0)
  }
  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translate3d(10px, 0, 0);
    transform: translate3d(10px, 0, 0)
  }
}

/* add this class */
.animated {
  -webkit-animation-duration:1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.shake {
  -webkit-animation-name: shake;
  animation-name: shake
}
<div class="animated shake">Shake this text</div>

Upvotes: 5

ketan
ketan

Reputation: 19341

It is becuase you didn't give animation-duration: 1s;

Just give it solved your issue.

.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
    animation-duration: 1s;
    -webkit-animation-duration:1s;
}

Check your updated Fiddle.

Upvotes: 0

Joci93
Joci93

Reputation: 823

Working, your missing the animation-duration: 4s;

  @-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}
@keyframes shake {
    0%, 100% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0)
    }
    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translate3d(-10px, 0, 0);
        transform: translate3d(-10px, 0, 0)
    }
    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translate3d(10px, 0, 0);
        transform: translate3d(10px, 0, 0)
    }
}
.shake {
    -webkit-animation-name: shake;
    animation-name: shake;
    animation-duration: 4s;
}

Fiddle: http://jsfiddle.net/pjra0sqk/2/

Upvotes: 0

Related Questions