CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
Harikrishnan
Harikrishnan

Reputation: 8065

Separate properties for different animations on same object

I am trying to move two wheel images towards each other using the following code:

HTML:

<body>  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  <img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>  
</body>

CSS:

body{
background:#fff;
}
body > img{
width:200px;
}

.leftwheel {
    float:left;    
    -webkit-animation: rotationLeft 2s infinite linear;
    animation: rotationLeft 2s infinite linear;
  -moz-animation: rotationLeft 2s infinite linear;
}
@-webkit-keyframes rotationLeft {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);margin-left:25%;}
}
@-moz-keyframes rotationLeft {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(359deg);margin-left:25%;}
}
@keyframes rotationLeft {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);margin-left:25%;}
}

.rightwheel {
    float:right;
    -webkit-animation: rotationRight 2s infinite linear;
    animation: rotationRight 2s infinite linear;
  -moz-animation: rotationRight 2s infinite linear;
}
@-webkit-keyframes rotationRight {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(-359deg);margin-right:25%;}
}
@-moz-keyframes rotationRight {
    from {-moz-transform: rotate(0deg);}
    to   {-moz-transform: rotate(-359deg);margin-right:25%;}
}
@keyframes rotationRight {
    from {transform: rotate(0deg);}
    to   {transform: rotate(-359deg);margin-right:25%;}
}

DEMO

Now the problem is, I want both the wheels to move towards each other, meet(collide) at the center and the movement should stop while the rotation still continues. But I have set the animation repeat as infinite since i want infinite rotation of the wheel. Can I achieve what I want just by using CSS? If not what are the javascript alternatives? Also how can I set one animation to repeat and other to happen only once in CSS?

Upvotes: 0

Views: 57

Answers (1)

5260452
5260452

Reputation: 11600

Try wrapping your images in divs, and applying your second animation to the wrapping divs. Include forwards (for animation-fill-mode) in your animation shorthand (https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode) to make the element holds its final position (rather than resetting to its initial position).

Update:

Based on your comment below that the wheels should collide, I would nix the floats and positioning by margin, and would instead position by absolute. Note that (if I understand what you want), the to positions would probably need to be stated by calc(), which is newer technology but mostly supported (http://caniuse.com/#search=calc). Also, your image file includes padding, which you might want to crop in an image editor, or you could reverse in your CSS.

WORKING DEMO (refresh page to repeat animation): http://jsbin.com/jifup/4

CSS: 

@-webkit-keyframes translationLeft {
  from { left: 0%; }
  to   { left: calc(50% - 170px); }
}

@-webkit-keyframes translationRight {
  from { right: 0%; }
  to   { right: calc(50% - 170px); }
}

@-webkit-keyframes rotationLeft {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(359deg); }
}

@-webkit-keyframes rotationRight {
    from { -webkit-transform: rotate(0deg); }
    to   { -webkit-transform: rotate(-359deg); }
}

body {
  background: #fff;
}

img {
  width: 200px;
}

.translateLeft {
  -webkit-animation: translationLeft 2s linear forwards;
  position: absolute;
  margin: -18px;
}

.translateRight {
  -webkit-animation: translationRight 2s linear forwards;
  position: absolute;
  margin: -18px;
}

.leftwheel {
  -webkit-animation: rotationLeft 2s infinite linear;
}


.rightwheel {
  -webkit-animation: rotationRight 2s infinite linear;
}

HTML: 

<body>

  <div class="translateLeft">
    <img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

  <div class="translateRight">
    <img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

</body>

PREVIOUS ANSWER CODE:

WORKING DEMO (refresh page to see animation again and again): http://jsbin.com/jifup/1

HTML: 

<body>  

  <div class="translateLeft">
    <img class="leftwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

  <div class="translateRight">
    <img class="rightwheel" src="http://exchangedownloads.smarttech.com/public/content/b3/b37268f0-9252-4c12-bb12-b5e68f582410/previews/medium/0001.png"/>
  </div>

</body>

CSS: 

@-webkit-keyframes translationLeft {
  from { margin-left: 0; }
  to   { margin-left: 25%; }
}

@-webkit-keyframes translationRight {
  from { margin-right: 0; }
  to   { margin-right: 25%; }
}

@-webkit-keyframes rotationLeft {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(359deg); }
}

@-webkit-keyframes rotationRight {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(-359deg); }
}

body {
  background: #fff;
}

img {
  width: 200px;
}

.translateLeft {
  -webkit-animation: translationLeft 2s linear forwards;
}

.translateRight {
  -webkit-animation: translationRight 2s linear forwards;
}

.leftwheel {
  float: left;    
  -webkit-animation: rotationLeft 2s infinite linear;
}


.rightwheel {
  float:right;
  -webkit-animation: rotationRight 2s infinite linear;
}

Upvotes: 1

Related Questions