Css animation @keyframe

HTML & CSS
1

css:

@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?
2

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

3

Hi there zouzi,

does this help…

<!DOCTYPE HTML>
<html lang="en">
<head>

<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 );}
 }
</style>

</head>
<body> 

 <div>
  <span>shake</span>
 </div>

</body>
</html>

coothead

2 Likes
4

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’.

3 Likes
5

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.

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.