Getting an image to rotate with css transform

Question

I have an image of a hand that I created and I am trying to make the hand look as if it is waiving. The image initially should be in its original form, which is where the fingers are pointing up to the left and then within a 4 second period, I want the hand to slowly rotate to the right to the 70deg point. Right now it loads with the fingers at the 70 deg point and does nothing.

What am I doing wrong?

#blue {
  background-color: blue;
}
.hand {
    width: auto;
    height: 400px;
    position: relative;
    -webkit-animation-name: wave; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    -webkit-animation-direction: normal; /* Chrome, Safari, Opera */
    animation-name: wave;
    animation-duration: 4s;
    animation-iteration-count: 1;
    animation-direction: normal;
}
 @keyframes wave {
    from,100% {
    -ms-transform: rotate(75deg); /* IE 9 */
    -webkit-transform: rotate(75deg); /* Chrome, Safari, Opera */
    transform: rotate(75deg);
    }

<div id="blue">
  <img src="http://optimumwebdesigns.com/images/hand.png" class="hand">
</div>

there is a syntax error, it should be `from { ... } to { ... }` — Aziz, Jan 27 '16 at 04:03
I did this and it doesn't do anything... ` @keyframes wave { from {0%}, to {100%} {` — Becky, Jan 27 '16 at 04:04
@Becky: Sorry to comment on an unrelated thread but you had deleted your question before I could comment. If you are just looking for ideas on how to make a border drawing animation, have a look at this - http://stackoverflow.com/questions/31198304/count-down-timer-with-circular-progress-bar/31199281?s=1|7.8495#31199281. — Harry, Jan 27 '16 at 15:57
@Harry Thank you very much for the help! That is all I was looking for. Something to guide me in the right direction. I tried searching for many different things and nothing appeared as I was looking for. I had things come up like solar system rotation and things like that. Thanks!!! — Becky, Jan 27 '16 at 16:01
@Harry That kind of got me in right direction, but I can't seem to get the lines to fill in in a circular path from one quadrant to the next. They all appear in a straight line.. https://jsfiddle.net/#&togetherjs=F1C7rAvHOU — Becky, Jan 27 '16 at 16:58

score 1 · Accepted Answer · answered Jan 27 '16 at 04:06

1

This is the correct CSS animation syntax

@keyframes NAME-YOUR-ANIMATION {

0% { opacity: 0; }

100% { opacity: 1; }

}

You can also replace the steps with words

from { ... }

to { ... }

Your code is missing a } at the end and marks the start and the end of the animation with the same property... the object is different in each state so you have to separate the steps.

#blue {
  background-color: blue;
}
.hand {
    width: auto;
    height: 400px;
    position: relative;
    -webkit-animation-name: wave; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    -webkit-animation-iteration-count: 1; /* Chrome, Safari, Opera */
    -webkit-animation-direction: normal; /* Chrome, Safari, Opera */
    animation-name: wave;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
 @keyframes wave {
    100% {
    -ms-transform: rotate(75deg); /* IE 9 */
    -webkit-transform: rotate(75deg); /* Chrome, Safari, Opera */
    transform: rotate(75deg);
    }
}

<div id="blue">
  <img src="http://optimumwebdesigns.com/images/hand.png" class="hand">
</div>

More information https://css-tricks.com/snippets/css/keyframe-animation-syntax/

answered Jan 27 '16 at 04:06

Aziz

7,685
3
31
54

Is there anyway to make the hand go away after the first wave? Then while it is going away a word to appear in its place? – Becky Jan 27 '16 at 04:12
Yes that looks really good! I can tweak it around, but how can I get the way to go away after the first initial wave? I know it can be done if setting it to a background image and setting `background-repeat: no-repeat`, but I am not sure how to do it while it is an image. Plus I just tried the background image way and it isn't turning out pretty. – Becky Jan 27 '16 at 04:35
Well this is all very abstract, how should it 'go away' exactly? what direction? does it shrink in size? does it fly out of the screen? does it fade while moving? – Aziz Jan 27 '16 at 04:37
Just when the animation is complete, at 100%, I want the image to go away, so I can proceed to another animation. – Becky Jan 27 '16 at 04:39
1

Oh ok. it can be done by simply setting the animation-count to 1 (I made it infinite). Also by default CSS resets the animation to first frame, so if the element disappears at 100%, it will be reset to 0% after animation ends. To fix this, we add the property `animation-fill-mode: forwards;` anyway, here is a working fiddle https://jsfiddle.net/azizn/10r5ygmg/2/ – Aziz Jan 27 '16 at 04:45
Gotcha! Yea, I tweaked it a while ago to the count at 1, I just couldn't get the image to go away after it reset. Perfect, thank you. I really didn't want to do a jQuery method to fix it, as I am trying to learn these transforms/keyframes better. I ended up with a fix `setTimeout(function () { $('.hand').hide(); }, 4500);` , but I like your method much better. Thank you!!!! – Becky Jan 27 '16 at 04:48
1

yeah I would go for javascript for better control of complicated sequences, CSS animation has its quirks, but for simple things it's great. good luck and have a nice day – Aziz Jan 27 '16 at 04:51

Getting an image to rotate with css transform

1 Answers1