How to use transform in CSS?

Question

css

Can you please tell me how to implement image movement using CSS3?
I dug up an article - https://habrahabr.ru/post/135816/ , according to the examples, it turns out that when hovering, the picture moves to the right by 350 px.
The code:

<style>
  #axis:hover .move-left {
    transform: translate(350px,0);
    -webkit-transform: translate(350px,0); /** Safari & Chrome **/
    -o-transform: translate(350px,0); /** Opera **/
    -moz-transform: translate(350px,0); /** Firefox **/
  }
  .object {
    position: absolute;
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
  }
  </style>
  <div id="axis">
    <img class="object move-left" style="width: 100px;" src="https://d13yacurqjgara.cloudfront.net/users/377441/screenshots/1671911/car-icons-set.gif"/>
  </div>

The only catch is to make a cyclic movement from left to right, constantly ... And it should start when the page loads ...
For what:
There will be a hidden block with a background, when you click on the button, this block will become display: block and the typewriter, as it were will go...

Answer 1

This is no longer a transition, but an animation .