CODEWITHSUNDEEP
css
user1536841
user1536841

Reputation: 146

rotation animation for specific duration when clicked via pure css

i want rotation animation on a image present in a div via pure CSS3 animation triggered when the image is clicked. the animation shuld be for specific duration.

Upvotes: 2

Views: 558

Answers (3)

Ana
Ana

Reputation: 37178

The one solution I can think of for triggering the rotation on click would be to use the checkbox hack and keyframe animations - see DEMO

HTML used:

<div class='img-container'>
    <input type='checkbox' name='t' id='t'><label for='t'></label>
    <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1998-14-i-web.jpg'>
</div>

Relevant CSS:

.img-container {
    position: relative;
    width: 400px;
    height: 295px;
}
.img-container input[type=checkbox] { display: none; }
.img-container input[type=checkbox] + label, .img-container img {
    position: absolute;
    min-width: 100%;
    height: 100%;
}
.img-container input[type=checkbox] + label {
    z-index: 2;
}
.img-container img { z-index: 1; }
.img-container input[type=checkbox] ~ img { animation: rev-rotate-img 1s; }
.img-container input[type=checkbox]:checked ~ img { animation: rotate-img 1s; }

@keyframes rotate-img { to { transform: rotate(360deg); } }
@keyframes rev-rotate-img { to { transform: rotate(-360deg); } }

Upvotes: 1

Endre Simo
Endre Simo

Reputation: 11541

You can do this by combining @keyframes with CSS3 animation command. A simple method should look like this:

-webkit-animation:
    roll-over-rotate 400ms .1s 1 ease-in-out normal forwards,
    roll-over-color 1000ms ease-out;
-moz-animation:
    roll-over-rotate 400ms .1s 1 ease-in-out normal forwards,
    roll-over-color 1000ms ease-out;

@-webkit-keyframes roll-over-rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(90deg);
  }
}

@-moz-keyframes roll-over-rotate {
  from {
    -moz-transform: rotate(0deg);
  }
  to {
    -moz-transform: rotate(90deg);
  }
}

First define the webkit animation then make reference to the animation function where you define the desired CSS3 specific effect.

For a live example you should check the css part of this experiment: http://www.hellopixel.net/experiments/javascript/worley-noise/worley.html

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32202

Hi now used to this it's helpfull for you

Link one

Link two

Link Three

Upvotes: 0

Related Questions