Css animation @keyframe



@keyframes shake {
        from { transform: translate(1px, 1px) rotate(0deg); }
        to { transform: translate(-1px, -2px) rotate(-1deg); }

but when i do animation: shake it doesn't do anything, can someone help?


Perhaps if you show us the HTML you're trying to apply this to someone might be able to help.


Hi there zouzi,

does this help...

<html lang="en">

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f9f9f9;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
div {
    position: relative;
    padding: 1em 0;
    text-align: center;
span {
    position: absolute;
    animation: shake 0.25s ease-in-out infinite;
@keyframes shake {
from { transform: translate(  2px,  2px ) rotate(  10deg ); }
to   { transform: translate( -2px, -2px ) rotate( -10deg );}






The CSS looks fine. Are you applying it the correct element?

Personally, I'm a fan of using 0% - 100% over 'from - to'. It doesn't take much before you need a third, fourth and more frames to make something look right, so you might as well use the same code notation for all animations. Lots of animations have '1 - initial state', '2. changed state' and '3. return to initial'.


writing just animation: shake is not enough, you need to include the time of animation and if it restart after the end or not

animation: shake 1s forwards should works.