#propellers
{
    position: relative;
    top: -180px;
    left: 22px;
    width: 50px;
    height: 50px;

    border: 4px  ridge black;    
    
    border-radius: 100%;

    transform-origin: 0% 0%;  
    
    animation: forward ;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state:   paused;
    
    
    animation-name: circle;
    animation-duration: 10s;
    animation-timing-function: steps(50) ;
    animation-iteration-count: infinite;
    animation-play-state:   paused;
    
     animation:   circle   10s  linear     infinite ,
                  forward  10s  steps(50)  infinite paused;



}

@keyframes circle
{
    from
    {
        transform: rotate(90deg);
    }

    to {
        transform: rotate(450deg);
    }
}

@keyframes forward1
{
    from
    {
        transform: translateX(300px);
    }
    to
    {
        transform: translateX(1500px);

    }
}
@keyframes forward
{
    0%
    {
       transform: translateY(0px);
    }
    25%
    {
        transform: translateY(-250px);
    }
    50%
    {
        transform: translateY(-200px);
    }
    100%
    {
        transform: translateX(1500px);
    }
}

/*

  animation:   circle   10s  linear     infinite ,
               forward  10s  steps(50)  infinite ;



    animation-name: circle;
    animation-duration: 10s;
    animation-timing-function: steps(50) ;
   animation-iteration-count: infinite;
    animation-play-state:   paused;

    

      animation: forward ;
    animation-duration: 20s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-play-state:   paused;


   
  -webkit-animation-name:    circle , forward ;
    -webkit-animation-duration: 10s, 10s;
    -webkit-animation-timing-function: linear , steps(100);
    -webkit-animation-iteration-count:  infinite,  infinite;
    -webkit-animation-play-state:  paused,  paused;




*/